jQuery操作元素css样式的三种方法


Posted in Javascript onJune 04, 2014

我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!”

1. addClass() - 添加CSS类
$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称
2. removeClass() - 移除CSS类
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称
3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类”newClass“将被赋给该ID。

在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className")用来判断某个元素是否已经被赋予某个CSS类。

下面是一个完整的例子。

<!DOCTYPE HTML> 
<head> 
<title>图片闪烁</title> 
<style type="text/css"> @-webkit-keyframes twinkling{ /*透明度由0到1*/ 
0%{ 
opacity:0; /*透明度为0*/ 
} 
100%{ 
opacity:1; /*透明度为1*/ 
} 
} 
.up{ 
-webkit-animation: twinkling 1s infinite ease-in-out; 
} 
</style> 
</head> 
<body> 
<div id="soccer" class="up"> 
哈哈 
</div> 
<br/> 
<input type="button" onclick='btnClick()'> 
<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script> 
<script> 
function btnClick(){ 
//$("#soccer").removeClass("up"); 
$("#soccer").toggleClass("up"); 
//$("p:first").removeClass("intro"); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 #Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 #Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 #Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 #Javascript
动态读取JSON解析键值对的方法
Jun 03 #Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 #Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 #Javascript
You might like
PHP的explode和implode的使用说明
2011/07/17 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
制冷与电控专业应届生求职信
2013/11/11 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
年度考核自我鉴定
2014/03/19 职场文书
技术股份合作协议书
2014/10/05 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
一条 SQL 语句执行过程
2022/03/17 MySQL