通过 jQuery,可以很容易地对 CSS 元素进行操作。

切换类

jQuery 操作 CSS

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

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子:

.important
{
font-weight:bold;
font-size:xx-large;
}.blue
{
color:blue;
}

jQuery addClass() 方法

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

实例

$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");
});

亲自试一试

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

实例

$("button").click(function(){$("#div1").addClass("important blue");
});

亲自试一试

jQuery removeClass() 方法

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

实例

$("button").click(function(){$("h1,h2,p").removeClass("blue");
});

亲自试一试

jQuery toggleClass() 方法

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

实例

$("button").click(function(){$("h1,h2,p").toggleClass("blue");
});

jQuery - 获取并设置 CSS 类相关推荐

  1. jQuery - 获取并设置 CSS 类、尺寸

    jQuery - 获取并设置 CSS 类 通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 拥有若干进行 CSS 操作的方法: addClass() - 向被选元素添加一个或多 ...

  2. jquery 判断控件css样式,jQuery获取并设置CSS类

    jQuery获取并设置CSS类 通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...

  3. jquery访问css类,jQuery - 获取并设置 CSS 类

    2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类 希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...

  4. 015_获取并设置CSS类

    1. hasClass()方法 1.1. hasClass()方法检查被选元素是否包含指定的class.返回true包含指定的class, 反之不包含. 1.2. 语法 $(selector).has ...

  5. jquery获取和设置属性_jQuery获取属性,设置属性,删除属性

    jquery获取和设置属性 Today we will look into following examples – jQuery get attribute, jQuery set attribut ...

  6. jQuery获取和设置元素

    本篇文章聊聊如何使用jQuery获取和设置元素内容与值. 一.获取和设置元素内容 在 jQuery 中,操作元素内容的方法包括 html() 和 text().前者与 JavaScript 中的 in ...

  7. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  8. ITK:获取或设置ITK类的成员变量

    ITK:获取或设置ITK类的成员变量 内容提要 C++实现代码 内容提要 获取或设置ITK类的成员变量. C++实现代码 #include "itkImage.h" #includ ...

  9. jQuery获取或设置元素的属性值

    jQuery获取或设置元素的属性值 获取元素属性值 固有属性($('div).prop('color')) 自定义属性($('div).attr('index')) //html代码<a hre ...

最新文章

  1. rest-framework之解析器
  2. OpenCV的实用图像处理操作案例分享
  3. ajax content download,关于ajax的content-download时间过慢问题的解决方案与思考
  4. matlab求传递函数在某个频率点的增益_【干货分享】轻松弄懂开关电源TL431环路补偿传递函数推导...
  5. cordova入门——cordova环境配置
  6. 卷积神经网络CNN 手写数字识别
  7. 如何在page_load方法判断是服务器端控件引发的page_load方法
  8. 批量更改文件编码格式 utf8到gb2312
  9. 计算机用并行传输还是串行,网线RJ45是并行传输还是串行
  10. hdu 2034 - 集合操作
  11. SpringCloud工作笔记039---spring cloud、javaweb中获取request对象的几种方法
  12. 街篮服务器维修时间,全新花式技能系统 《街头篮球》春节前夕版本上线
  13. ipsec穿越NAT功能的配置
  14. selenium自动化看网课
  15. Hibernate 5 详解!
  16. 判断中心对称图形C语言
  17. Web3创始人和建设者必备指南:如何构建适合的社区?
  18. 辰信领创携手天津麒麟全力保障国产操作系统安全
  19. CI 与 CD 有什么区别
  20. Sometimes you will never know the true value of a moment until it becomes a memory

热门文章

  1. C语言-什么是尾递归
  2. 【Android 逆向】应用数据目录 ( Android 应用数据目录 /data/data/package.name | 存放 SharedPreference 的 shared_pref 目录 )
  3. 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 BasicMessageChannel 通信 )
  4. 【数字信号处理】数字信号处理简介 ( 抽样定理 | 多抽样率 )
  5. SSH port forwarding: bind: Cannot assign requested address
  6. React + TypeScript:元素引用的传递
  7. 变参标准函数的重新封装,如printf
  8. 1.虚拟化的历史和定义
  9. 9.21渲染错误信息 参数化配置
  10. BZOJ2437 [Noi2011]兔兔与蛋蛋 【博弈论 + 二分图匹配】