>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 27275 个阅读者 刷新本主题
 * 贴子主题:  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开发-->Vue简介
  不可错过的几种JS优化技巧
  vue3-Composition-API的用法
  axios.all()解决并发请求
  Vue 项目从 Vue CLI 2 升级到 Vue CLI 4
  Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
  HTML5中的 Web Worker的使用
  Vue之引用第三方JS插件,CKPlayer使用
  前端面试题及答案汇总
  JS 循环删除数组
  JavaScript中的HTML DOM Button 对象
  JavaScript的HTML DOM Column 对象
  CSS3的响应式 Web 设计:媒体查询
  HTML 基础知识
  JavaScript 对象 的创建和使用
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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