编程 Javascript

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样式的全部内容了，希望大家能够喜欢。

JQuery操作元素的css样式

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 类型判断代码分析

Mar 28 Javascript

javascript 在firebug调试时用console.log的方法

May 10 Javascript

JS实现的生成随机数的4个函数分享

Feb 11 Javascript

javascript的变量、传值、传址、参数之间关系

Jul 26 Javascript

JQuery点击事件回到页面顶部效果的实现代码

May 24 Javascript

bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

Dec 01 Javascript

BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

Dec 14 Javascript

less简单入门(CSS 预处理语言)

Mar 08 Javascript

js canvas实现QQ拨打电话特效

May 10 Javascript

angular实现页面打印局部功能的思考与方法

Apr 13 Javascript

JavaScript命名空间模式实例详解

Jun 20 Javascript

详解如何在Javascript和Sass之间共享变量

Nov 13 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