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

素颜马尾好姑娘i 2022-06-09 09:17 332阅读 0赞

> 直接修改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>