jQuery-CSS类属性操作

àì夳堔傛蜴生んèń 2022-04-16 00:08 192阅读 0赞

## jQuery 操作 CSS ##

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

*  addClass() - 向被选元素添加一个或多个类
 *  removeClass() - 从被选元素删除一个或多个类
 *  toggleClass() - 对被选元素进行添加/删除类的切换操作

## jQuery addClass() 方法 ##

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").addClass("blue");
        $("div").addClass("important");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
    	font-weight:bold;
    	font-size:xx-large;
    }
    .blue
    {
    	color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <div>这是一些重要的文本!</div>
    <br>
    <button>为元素添加 class</button>
    
    </body>

您也可以在 addClass() 方法中规定多个类：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("body div:first").addClass("important blue");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
    	font-weight:bold;
    	font-size:xx-large;
    }
    .blue
    {
    	color:blue;
    }
    </style>
    </head>
    <body>
    
    <div id="div1">这是一些文本。</div>
    <div id="div2">这是一些文本。</div>
    <br>
    <button>为第一个 div 元素添加类</button>
    
    </body>

## jQuery removeClass() 方法 ##

下面的例子演示如何在不同的元素中删除指定的 class 属性：

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").removeClass("blue");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
    	font-weight:bold;
    	font-size:xx-large;
    }
    .blue
    {
    	color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <br>
    <button>从元素中移除 class</button>
    </body>

## jQuery toggleClass() 方法 ##

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggleClass("main");
      });
    });
    </script>
    <style type="text/css">
    .main
    {
    font-size:120%;
    color:red;
    }
    </style>
    </head>
    
    <body>
    <h1 id="h1">This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button class="btn1">切换段落的 "main" 类</button>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery学习笔记07-操作类属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

本是古典何须时尚/ 2024年04月17日 16:44/ 0 赞/ 8 阅读

相关【Java工具类】反射工具类(支持操作父类的方法、属性值)

import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetExcepti

Love The Way You Lie/ 2022年11月17日 05:10/ 0 赞/ 171 阅读

相关 jQueryCSS3视角动画侧边栏菜单

[下载地址][Link 1] 创建jQueryCSS3视角动画侧边栏菜单。侧边栏菜单,单击时将当前窗口,倾斜的角度,揭示了菜单选项。　　它可以用作水平或垂直。 ![6\_2

以你之姓@/ 2022年09月14日 13:25/ 0 赞/ 201 阅读

相关 html5-类名的操作-属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

浅浅的花香味﹌/ 2022年07月14日 00:42/ 0 赞/ 111 阅读

相关 jquery属性操作添加属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

淩亂°似流年/ 2022年07月14日 00:40/ 0 赞/ 224 阅读

相关 jQuery操作属性，CSS类,HTML代码，文本，值

属性 attr 取/设值 removeAttr 移除属性 prop 类似attr removeProp prop与attr的区别：attr用于取自己定义属性

ゝ一纸荒年。/ 2022年05月29日 14:15/ 0 赞/ 160 阅读

相关 jQuery-CSS类属性操作

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 re

àì夳堔傛蜴生んèń/ 2022年04月16日 00:08/ 0 赞/ 193 阅读

相关类属性与实例属性

类属性与实例属性文章目录类属性与实例属性类属性实例属性类属性的陷阱访问属性的优先级顺序

- 日理万妓/ 2022年04月06日 08:26/ 0 赞/ 281 阅读

相关 Jquery属性操作、添加类

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

柔情只为你懂/ 2021年11月09日 07:50/ 0 赞/ 276 阅读

相关 java 对象属性类属性

1，定义类属性：又叫做静态属性，即被static修饰。对象属性：又叫实例属性，非静态属性。如果一个属性声明成类属性，那么所以的对象，都共享这么一个值。给所以英雄

朱雀/ 2021年11月05日 19:16/ 0 赞/ 414 阅读