js关于开启和关闭样式表的问题

日常学习《js权威指南》第16.6.1节开启和关闭样式表。
作者写了这样的代码

function disableStylesheet (ss) {
        if( typeof ss === "number")
            document.styleSheets[ss].disabled = true;
        else {
            var sheets = document.querySelectorAll(ss);
            for(var i = 0 ;i < sheets.length; i++)
                sheets[i].disabled = true;
        }
    }

自己写了代码为实验:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16.6.1开启关闭样式表</title>
    <script type="text/javascript">
        function disableStylesheet (ss) {
            // body... 
            if( typeof ss === "number")
                document.styleSheets[ss].disabled = true;
            else {
                var sheets = document.querySelectorAll(ss);
                for(var i = 0 ;i < sheets.length; i++)
                    sheets[i].disabled = true;
            }
        }
    </script>
    <link rel="stylesheet" type="text/css" href="css/hello.css">
    <link rel="stylesheet" type="text/css" href="css/ss.css">
</head>
<body>
    <div id="hello">你好</div>
    <div id="ss">ss</div>
</body>
</html>
<!--试验内容
disableStylesheet(0)
disableStylesheet("#ss")
-->

对于 disableStylesheet(0),没有问题
而 disableStylesheet("#ss")并不能顺利关闭其样式,


问题:
1.可以通过选择元素,然后关闭样式表吗?
2.如何清除元素的样式?
3.这个函数这样写是不是有问题?

阅读 2.9k
3 个回答

你说的关闭样式表是什么意思?清除样式表的样式引用?那你为何不直接添加link节点,动态赋值href,然后删除节点。没明白你的需求是什么意思

disableStylesheet("link[rel=stylesheet]");

disableStylesheet是用来关闭link[rel=stylesheet]的效果的。

你的#ss是一个div的dom元素,当然没有效果喽。顶多让#ss多了一个disabled的属性

试试这个:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16.6.1开启关闭样式表</title>
    <script type="text/javascript">
        function disableStylesheet (ss) {
            // body... 
            if( typeof ss === "number")
                document.styleSheets[ss].disabled = true;
            else {
                var sheets = document.querySelectorAll(ss);
                for(var i = 0 ;i < sheets.length; i++)
                    sheets[i].disabled = true;
            }
        }
        
        disableStylesheet("#ssStyle"); // 这样应该可以
    </script>
    <link rel="stylesheet" type="text/css" href="css/hello.css">
    <link rel="stylesheet" id="ssStyle" type="text/css" href="css/ss.css">
</head>
<body>
    <div id="hello">你好</div>
    <div id="ss">ss</div>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题