css操作

html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css操作</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", "20px");
    //   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");
    //隐式迭代：
      //设置操作的时候：会给jq内部的所有对象都设置上相同的值。
      //获取的时候：只会返回第一个元素对应的值。
      console.log($("li").css("fontSize"));
  });
</script>
</body>
</html>

　　

posted @ 2020-04-16 11:07  迷幻天空岛  阅读(96)  评论(0)    收藏  举报