jq对css样式的操作

自己下载js文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
  <li>高圆圆</li>
  <li>周二珂</li>
  <li>冯提莫</li>
  <li>郑爽</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  
  $(function () {
    
    
    //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:想要获取的样式
    $("li").eq(0).css("fontSize", "20px");
    $("li").eq(1).css("fontSize", "21px");
    $("li").eq(2).css("fontSize", "22px");
    $("li").eq(3).css("fontSize", "23px");
    
    //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
    
    
    //隐式迭代:
      // 设置操作的时候:会给jq内部的所有对象都设置上相同的值。
      // 获取的时候:只会返回第一个元素对应的值。
    console.log($("li").css("fontSize"));//16px
  
  
  });
  
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_33530408/article/details/81168079