JS直接修改CSS屬性/id屬性/class屬性

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

直接修改CSS屬性關鍵函數：
document.createAttribute(‘style’)：建立屬性節點
obj.setAttributeNode(attr_node)：向obj元素中添加指定的屬性值
obj.attributes[‘style’]：擷取obj元素的style屬性值
obj.setAttribute(nameString,valueString)：為obj元素的nameStirng屬性賦值為valueString

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>直接修改style屬性</title>    <style>        #frm{            border:1px solid #00f;            width: 200px;            height: 20px;        }    </style></head><body>    <div id="frm"></div>    <button onclick="changebgcolor()">更改背景顏色</button>    <button onclick="changebdcolor()">更改邊框顏色</button>    <script>        var bg = 0xffff;        var bd = 0xffff;        function getColor(str){            var len = str.length;            if(len<=6){                for(var i=0;i<6-len;i++){                    str ='0'+str;                }            }else{                str = str.slice(len-6, len);            }            return str;        }        function changebgcolor(){            var obj = document.getElementById('frm');            if(obj.attributes['style'] == undefined){                // 建立屬性節點                var attr_node = document.createAttribute('style');                // 向元素中添加指定的屬性節點                obj.setAttributeNode(attr_node);            }            // 擷取原先style屬性的值            var s = obj.attributes[obj.attributes.length-1].value;            // 重新添加屬性值            obj.attributes[obj.attributes.length-1].value = s+'background:#'+getColor(bg.toString())+";";            bg = bg<<2;        }        function changebdcolor(){            var obj = document.getElementById('frm');            if(obj.attributes['style'] == undefined){                var attr_node = document.createAttribute('style');                var text_node = document.createTextNode('');                obj.setAttributeNode(attr_node);            }            var s = obj.attributes[obj.attributes.length-1].value;            obj.attributes[obj.attributes.length-1].value = s+'border-color:#'+getColor(bd.toString())+';';            bd = bd<<2;        }    </script></body></html>

通過點擊按鈕即可更改背景或者邊框的顏色.
補充：
有些瀏覽器若不定義style的屬性值，則不會存在該style節點，而有的瀏覽器style節點依然存在（如IE）。一般來說style屬性的子節點為#text節點，但有的瀏覽器不支援屬性節點添加子節點（如Chrome瀏覽器）。
雖然IE瀏覽器一直存在style屬性節點（即obj.attributes[‘style’].nodeType為2），但是不可以使用nodeValue對其賦值，所以將上述代碼修改為如下即可，可支援Chrome瀏覽器、FireFox瀏覽器及IE瀏覽器

//修改兩個方法如下：        function changebgcolor(){            var obj = document.getElementById('frm');            var s = obj.style.cssText;            obj.style.cssText = s+"background:#"+getColor(bg.toString())+";";            bg = bg<<2;        }        function changebdcolor(){            var obj = document.getElementById('frm');            var s = obj.style.cssText;            obj.style.cssText = s+'border-color:#'+getColor(bd.toString())+";";            bd = bd<<2;        }

而在低版本的IE瀏覽器使用上述代碼，由於style重複屬性過多或者由於瀏覽器的缺陷，會影響樣式的顯示，可以修改為如下代碼，同樣適用於Chrome瀏覽器、FireFox瀏覽器及IE瀏覽器

obj.style['background'] = "#"+getColor(bg.toString());obj.style['borderColor'] = "#"+getColor(bd.toString());//或者obj.style.background = "#"+getColor(bg.toString());obj.style.borderColor = '#"+getColor(bd.toString());

直接修改id屬性/class屬性
obj.className = ‘classname’：將obj元素的class改為classname
obj.id = ‘idname’：將obj元素的id改為idname
obj.getAttribute(‘name’)：獲得obj元素的name屬性值
obj.attributes：獲得obj元素的所有屬性，返回結果是包含name/id/class三個屬性及其值的對象

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>直接修改id和class屬性</title>    <style>        #frm{            border:2px solid #00f;            width: 200px;            height: 20px;        }        .frm{            background-color: #c0f2f8;        }    </style></head><body>    <div name="obj">添加刪除樣式單</div>    <button onclick="addStyle(this)">添加樣式單</button>    <button onclick="deleteStyle(this)">刪除樣式單</button>    <div name="obj">添加刪除樣式單</div>    <script>        function addStyle(obj){            var fa_node = obj.parentNode;            for(var i=0;i<fa_node.childNodes.length;i++){                if(fa_node.childNodes[i].attributes != null){                    if(fa_node.childNodes[i].getAttribute('name') == 'obj'){                        fa_node.childNodes[i].id = 'frm';                        fa_node.childNodes[i].className = 'frm';                    }                }            }        }        function deleteStyle(obj){            var fa_node = obj.parentNode;            for(var i=0;i<fa_node.childNodes.length;i++){                if(fa_node.childNodes[i].attributes != null){                    if(fa_node.childNodes[i].getAttribute('name') == 'obj'){                        fa_node.childNodes[i].id = '';                        fa_node.childNodes[i].className = '';                    }                }            }        }    </script></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More