JS动态增删样式单

最新推荐文章于 2022-09-18 10:19:56 发布

小萝莉_Lolita

最新推荐文章于 2022-09-18 10:19:56 发布

阅读量442

点赞数

分类专栏： JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/MDreamlove/article/details/77800419

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关键方法及属性：
document.getElementsByTagName(‘sytle’)：获得style标签对象
obj.nodeName：或者obj节点的节点名称
style标签对象的子节点都是文本类型的节点
——元素节点的 nodeName 是标签名称
——属性节点的 nodeName 是属性名称
——文本节点的 nodeName 永远是 #text
——文档节点的 nodeName 永远是 #document

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加新的样式单1</title>
    <style>
        #frm{
            border:2px solid #00f;
            width: 200px;
            height: 20px;
        }
    </style>
    <style>
        #frm{
            color:green;
        }
    </style>
</head>
<body>
    <div id="frm">添加删除样式单</div>
    <button onclick="addStyle()">添加样式单</button>
    <button onclick="deleteStyle()">删除样式单</button>
    <script>
        function addStyle(){
            var obj = document.getElementsByTagName('style');
            var len = obj.length;
            var text_node = null;
            for(var i=obj[len-1].childNodes.length-1;i>=0;i--){
                if(obj[len-1].childNodes[i].nodeName == '#text'){
                    text_node = obj[len-1].childNodes[i];
                    break;
                }
            }
            if(text_node == null){
                text_node = document.createTextNode("");
                obj[len-1].appendChild(text_node);
            }
            text_node.data += "#frm{background:#f00;width:200px;}";
        }
        function deleteStyle(){
            var obj = document.getElementsByTagName('style');
            var len = obj.length;
            for(var i=len-1;i>=0;i--){
                for(j=obj[i].childNodes.length-1;i>=0;i--){
                    if(obj[i].childNodes[j].nodeName == '#text'){
                        obj[i].removeChild(obj[i].childNodes[j]);
                    }
                }
            }
        }
    </script>
</body>
</html>

分析：
增加样式：选择最后一个style标签对象，因为如果在非最后一个style标签对象修改属性，很可能会被后面的属性覆盖掉，选择最后的一个style标签对象，对其子节点即文本节点赋属性值
删除样式：删除的所有的样式，所以选择所有的style标签对象，依次删除每个style标签的子节点删除即可

小萝莉_Lolita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动态增删样式单

关键方法及属性： document.getElementsByTagName(‘sytle’)：获得style标签对象 obj.nodeName：或者obj节点的节点名称 style标签对象的子节点都是文本类型的节点 ——元素节点的 nodeName 是标签名称 ——属性节点的 nodeName 是属性名称 ——文本节点的 nodeName 永远是 #text
复制链接

扫一扫