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实现动态增加文件域表单
Feb 12 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
require.js的用法详解
Oct 20 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js闭包的用途详解
2014/11/09 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
基本DOM节点操作
2017/01/17 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
React注册倒计时功能的实现
2018/09/06 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python函数的5种参数详解
2017/02/24 Python
Django自定义分页效果
2017/06/27 Python
python如何重载模块实例解析
2018/01/25 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
如何理解python面向对象编程
2020/06/01 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
python自动生成sql语句的脚本
2021/02/24 Python
经典毕业生求职信
2014/07/12 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
教师听课评语大全
2014/12/31 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
单位同意报考证明
2015/06/17 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python