jQuery 樣式操作

雲崖先生發表於2020-08-23
jQuery

樣式設定

css()

　　 訪問匹配元素的某一樣式或對其進行設定，可以單個設定CSS樣式，也可以使用{}一次性設定多個CSS樣式

　　 如果有多個單詞，可以使用駝峰形式，也可以使用CSS中的單詞命名方式

　　 如：background-color或backgroundColor均可

<body>
        <div style="color: red;font-size:15px;">HELLO</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").css("color")); // 獲取
        $("div").css("color","#fff"); // 設定一個
        $("div").css({"background-color":"black","font-size":"16px"}); // 設定多個;

</script>

批量樣式

　　通常會在書寫CSS程式碼時會對一個class類的標籤做統一的樣式設定，當腰應用這些樣式時直接新增class屬性即可，這也是推薦的做法

hasClass()

　　 檢測元素是否具有某一class屬性值，返回boolean型別

<body>
        <div class="show"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").hasClass("show")); // true

</script>

addClass()

　　 為jQuery物件中的元素新增class

<body>
        <div class="show"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").addClass("box_1")); 
        
        // S.fn.init [div.show.box_1, prevObject: S.fn.init(1)]

</script>

removeClass()

　　 將jQuery物件中的某一class進行移除

<body>
        <div class="show"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").removeClass("show")); 
        
        // S.fn.init [div, prevObject: S.fn.init(1)]

</script>

toggleClass()

　　 如果存在（不存在）就刪除（新增）一個類。

<body>
        <div class="show"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        $("div").toggleClass("show");   // 刪除
        $("div").toggleClass("box_1");   // 新增

        console.log($("div"));
        
        // <div class="box_1"></div>

</script>

元素位置

視口距離

　　 使用offset()可獲取與設定當前元素位於視口的位置。

　　 返回的物件包含兩個整型屬性：top和 left，以畫素計。此方法只對可見元素有效。

<body>
        <div style="transform: translate(100px,100px);">HELLO</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").offset());  // {top: 108, left: 108}

        // 設定元素距離視口的位置

        $("div").offset({ "top": 10, "left": 30 });

        console.log($("div").offset());  // {top: 10, left: 30}

</script>

父級距離

　　 使用position()獲取標籤物件對於已定位的父級元素的位置資訊。

<body>
        <div style="position:relative;">
                <span style="transform: translate(40px,20px);position:absolute;">HELLO</span>
        </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("span").position());  // {top: 20, left: 40}

</script>

元素尺寸

height()&width()

　　 height()取得匹配元素當前計算的內容區域高度值(px)

　　 width()取得匹配元素當前計算的內容區域寬度值(px)

僅內容區域

　

<body>
        <div style="width: 200px;height: 300px;"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").height()); // 300
        console.log($("div").width()); // 200

</script>

innerHeight()&innerWidth()

　　 innerHeight()取得匹配元素當前計算的內容區域以及內邊距之內的補白區域高度值(px)

　　 innerWidth()取得匹配元素當前計算的內容區域以及內邊距之內的補白區域寬度值(px)

　　 包括內容區域，內邊距補白區域

<body>
        <div style="width: 200px;height: 300px;padding: 10px;"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").innerHeight()); // 320
        console.log($("div").innerWidth()); // 220

</script>

outerHeight()&outerWidth()

　　 outerHeight()取得匹配元素當前計算的內容區域以及內邊距之內的補白區域和邊框區域高度值(px)

　　 outerWidth()取得匹配元素當前計算的內容區域以及內邊距之內的補白區域和邊框區域寬度值(px)

　　 包括內容區域，內邊距補白區域，邊框區域

<body>
        <div style="width: 200px;height: 300px;padding: 10px;border: 10px solid #ddd;"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        console.log($("div").outerHeight()); // 340
        console.log($("div").outerWidth()); // 240

</script>

滾動條相關

scrollTop()

　　 獲取或設定當前物件的縱向滾動條的位置

<body>
        <button type="button">點我跳轉底部</button>
        <div style="height: 3000px;"></div>
        <footer>底部</footer>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        // 設定window物件的滾動條事件
        window.addEventListener("scroll", function () {
                console.log($(window).scrollTop());
        });

        document.querySelector("button").addEventListener("click", function () {
                $(window).scrollTop(3000);
                console.log("當前滾動條位置:",$(window).scrollTop());  // 2774
        })

</script>

scrollLeft()

　　 獲取或設定當前物件的橫向滾動條的位置

<body style="width: 1800px;overflow: scroll">
        <button type="button">點我跳轉最右側</button>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        "use strict";

        // 設定window物件的滾動條事件
        window.addEventListener("scroll", function () {
                console.log($(window).scrollLeft());
        });

        document.querySelector("button").addEventListener("click", function () {
                $(window).scrollLeft(3000);
                console.log("當前滾動條位置:", $(window).scrollLeft());  // 445
        })

</script>

相關文章