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 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
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 print类函数使用总结
2010/06/25 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php密码生成类实例
2014/09/24 PHP
php从字符串创建函数的方法
2015/03/16 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
开启PHP的伪静态模式
2015/12/31 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript类库D
2010/10/24 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
javascript基本语法
2016/05/31 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
浅析python的Lambda表达式
2019/02/27 Python
python解释器spython使用及原理解析
2019/08/24 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python 如何批量更新已安装的库
2020/05/26 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
热能动力工程毕业生自荐信
2013/11/07 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android