当前位置: 首页 > 编程笔记 >

JQuery操作元素的css样式

夏宪
2023-03-14
本文向大家介绍JQuery操作元素的css样式,包括了JQuery操作元素的css样式的使用技巧和注意事项,需要的朋友参考一下

我们常常要使用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样式的三种方法,包括了jQuery操作元素css样式的三种方法的使用技巧和注意事项,需要的朋友参考一下 我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽

  • 本文向大家介绍jQuery Dom元素操作技巧,包括了jQuery Dom元素操作技巧的使用技巧和注意事项,需要的朋友参考一下 Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取

  • 问题内容: 反正有没有让Python中的元组操作像这样工作: 代替: 我知道它是这样工作的,因为和方法被定义为那样工作。因此,唯一的方法是重新定义它们? 问题答案:

  • QueryList不仅可以读取DOM元素的属性值,还可以操作DOM元素。 在采集单元素章节,我们接触到了find()方法,它用于选择DOM元素,返回值为QL\Dom\Elements对象,这是QueryList内置的一个DOM元素集合对象,它拥有几乎所有与jQuery操作DOM完全相同的API。 熟悉jQuery的同学应该知道jQuery操作DOM的API方法非常的多,QueryList几乎全部支

  • 本文向大家介绍基于jquery animate操作css样式属性小结,包括了基于jquery animate操作css样式属性小结的使用技巧和注意事项,需要的朋友参考一下 昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的。不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 padd

  • 本文向大家介绍Jquery搜索父元素操作方法,包括了Jquery搜索父元素操作方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Jquery搜索父元素操作方法。分享给大家供大家参考。具体分析如下: 1. parents()方法 格式: 用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选。 如: 2. cloest方法 格式: 该方法从元素本身开始,逐级向上