jQuery中的CSS-DOM操作

更新時間：2022年05月04日 11:38:29 作者：.NET開發(fā)菜鳥

這篇文章介紹了jQuery中的CSS-DOM操作，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

除了css()以外，還有獲取和設置元素高度、寬度、相對位置等的樣式操作方法，語法如下：

高度和寬度示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS-DOM操作演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 設置height()和width()都是200
            $("li").find("span").css({"display":"block","border":"1px solid red"}).width(200).height(200);
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >小米的MI 2手機</a><span class="hot">火爆銷售中</span></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >蘋果iPad mini</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >三星GALAXY III</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >蘋果iPhone 5s</a></li>
    </ul>
    <input type="button" value="點擊按鈕" />
</body>
</html>

效果：

元素相對位置示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS-DOM操作演示示例</title>
    <style>
      .hot{
          color: #ff0000;
      }
      a{
          color: #000000;
          text-decoration: none;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
        $(function(){
            // 設置height()和width()都是200
            //$("li").find("span").css({"display":"block","border":"1px solid red"}).width(200).height(200);

            //offset
            $("input[type='button']").click(function(){
            var x=$("span").offset();
            console.log(x);
            $("span").text("橫坐標:"+x.left+",縱坐標:"+x.top);
            });
        });
    </script>
</head>
<body>
    <img src="ad.jpg" alt="1" />
    <img src="ad.jpg" alt="2" />
    <img src="ad.jpg" alt="3" />
    <ul>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >小米的MI 2手機</a><span class="hot">火爆銷售中</span></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >蘋果iPad mini</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >三星GALAXY III</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >蘋果iPhone 5s</a></li>
    </ul>
    <input type="button" value="點擊按鈕" />
</body>
</html>

效果：