网站链接: HDHCMS 散文随笔
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>JS直接修改CSS属性、id属性及class属性

JS直接修改CSS属性、id属性及class属性

2019/2/15 14:03:56 0人评论 38次

JS直接修改CSS属性、id属性及class属性,有些浏览器若不定义style的属性值,则不会存在该style节点,而有的浏览器style节点依然存在(如IE)。一般来说style属性的子节点为#text节点,但有的浏览器不支持属性节点添加子节点(如Chrome浏览器)。虽然IE浏览器一直存在sty…

<!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>


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-4 http://www.yuyanba.com