448day（css操作，class操作）

最新推荐文章于 2025-09-16 22:16:10 发布

原创最新推荐文章于 2025-09-16 22:16:10 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用jQuery进行CSS样式修改及class操作的方法，包括如何为元素添加、删除、检查和切换类，以及批量修改样式。

《2018年12月25日》【连续448天】

标题：css操作，class操作；

内容：

 
    //css(name, value)
    //修改单个样式
    //name:样式名 value:样式值
    /*
    $("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
    */
    
    //css(obj)
    //修改多个样式
    /*
    $("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });
    */
    //获取样式
    //css(name)
    //name:想要获取的样式
    
    //隐式迭代：
      // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
      // 获取的时候：只会返回第一个元素对应的值。

<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
  <li class="aa bb cc dd">1</li>
  <li class="aa bb cc dd">2</li>
  <li class="aa bb cc dd">3</li>
  <li class="aa bb cc dd">4</li>
</ul>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("input").eq(0).click(function () {
      
      // 添加一个类
      $("li").addClass("basic");
    });
  
    $("input").eq(1).click(function () {
      $("li").addClass("bigger");
    });
    
    
    $("input").eq(2).click(function () {
      
      //移除一个类
      $("li").removeClass("bigger");
    });
    
    //判断类
    $("input").eq(3).click(function () {
    
      console.log($("li").hasClass("bigger"));;
    });
  
  
    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });
  });
</script>
</body>