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

来源：互联网发布：淘宝的渠道管理在哪里编辑：程序博客网时间：2024/06/05 23:51

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

阅读全文

0 0