CSS類的操做

時間 2019-12-20

標籤 css 欄目 CSS 简体版

原文原文鏈接

CSS類的操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .b1 {
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }

            .b2 {
                /* width: 200px; */
                height: 200px;
                background-color: aquamarine;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                // 獲取box
                var box = document.getElementById("box");
                // 獲取btn01
                var btn01 = document.getElementById("btn01");
                // 獲取btn02
                var btn02 = document.getElementById("btn02");
                // 爲btn01綁定單擊響應函數
                btn01.onclick = function() {
                    // 修改box的樣式
                    /*
                    經過style屬性來修改元素的樣式，沒修改一個樣式，瀏覽器就須要從新渲染一次頁面
                      這樣的執行的性能是比較差的，並且這種形式當咱們要修改多個樣式時，也不方便
                    */
                    // box.style.width="200px";
                    // box.style.height="200px";
                    // box.style.backgroundColor="yellow";


                    // 修改box的class屬性
                    /*
                    咱們能夠經過修改元素的class屬性來間接的修改樣式
                    只須要一次，便可同時修改多個樣式
                      瀏覽器只須要從新渲染頁面一次，性能比較好
                      而且這種方式，能夠使表現和行爲進一步的分離
                    */
                    toggleClass(box,"b2");
                }
                btn02.onclick=function(){
                    removeClass(box,"b2");
                }
            };
            // 定義一個函數，用來向一個元素中添加指定的class屬性值
            /*
             - 參數：
               obj:要添加class屬性的元素
               cn:要添加的class值
            */
            function addClass(obj, cn) {
                // 檢查obj中是否含有cn》
                if (!hasClass(obj, cn)) {
                    obj.className += " " + cn;
                }

            }
            /*
            判斷一個元素中是否含有指定的class屬性值
             - 參數：
               obj:
               cn:
            */
            function hasClass(obj, cn) {
                // 判斷obj中有沒有cn class  
                // 建立一個正則表達式
                // var reg=/\bb2\b/;
                var reg = new RegExp("\\b" + cn + "\\b");

                return reg.test(obj.className);

            }
            // 刪除一個元素中的指定的class屬性
            function removeClass(obj, cn) {
                // 建立一個正則表達式
                var reg = new RegExp("\\b" + cn + "\\b");

                // 刪除class
                obj.className = obj.className.replace(reg, "");
            }
            /*
            toggleClass能夠用來切換一個類
              - 若是元素中具備該類,則刪除
              - 若是元素中沒有該類,則添加
            */
            function toggleClass(obj,cn){
                // 判斷obj中是否含有cn
                if(hasClass(obj,cn)){
                    // 有,則刪除
                    removeClass(obj,cn);
                }else{
                    addClass(obj,cn);
                }
            }
        </script>
    </head>
    <body>
        <button id="btn01">點擊按鈕之後修改box的樣式</button><br><br>
        <button id="btn02">點擊按鈕之後刪除box的樣式</button><br><br>
        <div id="box" class="b1"></div>
    </body>
</html>

1. jQuery-CSS類屬性操做
2. jQuery---CSS操做
3. jQuery 操做 CSS
4. jQuery的CSS操做知識
5. Vue.js中對css的操做
6. JQuery：JQuery操作CSS類
7. redis操做類
8. MySQL操做類
9. File類操做
10. jquery類操做
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Kotlin學習（二）基本類型
• RxJava操作符（十）自定義操作符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。