>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 28866 个阅读者 刷新本主题
 * 贴子主题:  jQuery 获取并设置 CSS 类 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-02-02 13:26:59     消息  查看  搜索  好友  邮件  复制  引用

  


  
$(document).ready(function(){

  $("#btnEx").click(function(){

    $("#test").toggleClass("important");

  });

});

.important

{

font-size:x-large;

font-weight:bold;

color:#c3c3c3;

}

jQuery -  获取并设置 CSS 类

通过 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 ( ) {
  $ ( " body div:first " ) . 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 " ) ;
} ) ;

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-03 21:28:33 重新编辑]
  Java面向对象编程-->数组
  JavaWeb开发-->JSP技术详解(Ⅱ)
  JSP与Hibernate开发-->数据库事务的并发问题的解决方案
  Java网络编程-->ServerSocket用法详解
  精通Spring-->Vue指令
  Vue3开发-->绑定CSS样式
  VSCode 开发Vue必备插件
  JavaScript数组去重(12种方法)
  Vue3.0里为什么要用 Proxy API 替代 defineProperty API ? ...
  Vue选项的用法
  20分钟带你掌握JavaScript Promise和 Async/Await
  拯救React的hooks:react的问题和hooks的作用
  jQuery与AJAX的整合简介
  JavaScript的HTML DOM Track 对象
  jQuery UI 如何使用部件库
  JavaScript 的HTML DOM 事件
  JavaScript prototype(原型对象)
  JavaScript 正则表达式
  JavaScript 的字符串以及处理方法
  JavaScript 输出数据
  DTD - XML 构建模块
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。