JQuery操作元素的css样式


Posted in Javascript onMarch 09, 2015

我们常常要使用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类。

下面是一个完整的例子。

 <span style=”font-size:18px;”><!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>

 </span>

以上所述就是本文关于jQuery操作CSS样式的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
vue权限问题的完美解决方案
May 08 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP图片上传代码
2013/11/04 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
Python中的hypot()方法使用简介
2015/05/18 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
python实现批量修改文件名代码
2017/09/10 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python和Go语言的区别总结
2019/02/20 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
办公室助理岗位职责
2013/12/25 职场文书
优良学风班总结材料
2014/02/08 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
征求意见函
2015/06/05 职场文书
推普标语口号大全
2015/12/26 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
详解JVM系列之内存模型
2021/06/10 Javascript
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
python 进阶学习之python装饰器小结
2021/09/04 Python