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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
详解Node全局变量global模块
Sep 28 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
详解Vue slot插槽
Nov 20 Vue.js
跟我学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设计模式 Factory(工厂模式)
2011/06/26 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
javascript 函数速查表
2010/02/07 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
vue实现简单加法计算器
2020/10/22 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
canvas使用注意点总结
2013/07/19 HTML / CSS
银行学习十八大感想
2014/01/11 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
javascript Number 与 Math对象的介绍
2021/11/17 Javascript