document.styleSheets [i] .disabled在chrome中不起作用

时间:2012-01-03 22:25:10

标签: javascript css google-chrome stylesheet

我有一个非常奇怪的问题需要解决;解决方案应该是纯JavaScript(不允许框架)。这是:“显示页面上启用的所有样式表”。

我使用chrome是因为IE中存在innerHtml的多个问题,尽管它具有样式表的cssText属性,非常适合我的目的。

无论如何,这是我的例子

<html>
    <head>
        <style MEDIA="screen">
            h1 {color:blue; font-size:10pt; background-color:cyan}
        </style>
        <style MEDIA="screen" DISABLED="true">
            h4 {color:blue; font-size:10pt; background-color:cyan}
        </style>
        <style MEDIA="print">
            h1 {color:gray; font-size:12pt; font-weight: bold}
            h2 {font-style:italic}
        </style>
        <style DISABLED="true">
            h2 {color:green; font-size:12pt}
        </style>
        <style>
            h3 {font-style:italic}
        </style>

        <script language="Javascript">
            function displayActiveStyles() {
                var container = document.getElementById('activeStyles');                                
                var i;
                for (i=0; i<document.styleSheets.length; i++) {
                    alert(document.styleSheets[i].disabled);
                }   
            }                  
        </script>
    </head>
    <body>
        <h1>one</h1>
        <h2>two</h2>
        <h3>three</h3>
        <input type="button" value="show" onclick="displayActiveStyles()" >
        <hr />
        <div id="activeStyles"></div>
    </body>
</html>

问题是,对于所有5个样式表,它都会警告false这是不正确的。如果有人对我犯错的地方有任何想法,或者根本没有任何想法,请告诉我。

1 个答案:

答案 0 :(得分:0)

我知道你想要列出每个样式表的href,对吗?在您的代码中,您将浏览每个样式表,并警告其已禁用的属性。由于它们被启用,它们会警告“错误”,这是正确的。如果你想获得只有已启用的href,你可以这样做:

var i;
for (i = 0; i < document.styleSheets.length; i++) {
    if (!document.styleSheets[i].disabled) {
        alert(document.styleSheets[i].href);
    }
}

在这里尝试这个,有一个样式表,其href为null。不确定为什么会这样,我快速搜索了一些东西,这可能是因为它是<style>标签。您可以添加document.styleSheets[i].href along with the check for已禁用的支票。