Question

所以我有以下代码

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        document.styleSheets[0].cssRules[0].style.color="blue";
    </script>
</head>
//etc.

所以基本上这个代码适用于IE和Mozilla，但不适用于Chrome。实际上，当你运行document.styleSheets[0].cssRules时，它会返回一个CSSRulesList对象（在IE和Mozilla中），但在Chrome中它返回null。顺便说一下，对于嵌入式样式，这个对象似乎甚至可以在Chrome中使用。

这个功能在Chrome中实际上不可用吗？如果是这样，是否有Chrome替代品可让您使用Javascript处理外部样式表/文件？

Answer 1

替代

document.styleSheets[0].rules[0].style.color = "blue";

此代码段可能有助于查看支持哪个集合。建议先使用cssRules集合，如果不受支持，请使用rules集合。

if (document.styleSheets[0].cssRules)
    document.styleSheets[0].cssRules[0].style.color = "blue";
else if (document.styleSheets[0].rules)
    document.styleSheets[0].rules[0].style.color = "blue";

修改

下面的代码段在IE8，IE11，Firefox，Chrome，Safari和Opera上运行正常;在我的本地和生产服务器上;它也适用于jsbin;但它不适用于js fiddle - 在任何上述浏览器上！

<!DOCTYPE>
<html>
<head>
<style type="text/css">
    .panel { 
        background-color: #00ff00; 
        color: #ffffff; 
        width: 100px; 
        height: 100px; 
        font-size: 30px;
    }
</style>
<script type="text/javascript">
window.onload = function(){
    document.getElementById('button').onclick = function() {
        if (document.styleSheets[0].cssRules)
            document.styleSheets[0].cssRules[0].style.color = "black"; 
        else if (document.styleSheets[0].rules)
            document.styleSheets[0].rules[0].style.color = "black";
    };
};
</script>
</head>
<body>
    <div class="panel"><b>Text</b></div>
    <input type="button" name="button" id="button" value="Change Color" />
</body>
</html>

如果我将style部分更改为此

<link rel="stylesheet" type="text/css" href="http://external-server/styles.css" />

上面的代码段仅适用于IE11。所以，它似乎是cross-domain policy issue，因为Firefox说的是The Same Origin Policy disallows reading the remote resource at http://external-server/styles.css. This can be fixed by moving the resource to the same domain or enabling CORS.

也许以下代码段可以解决问题

<style type="text/css">
    @import url("http://external-domain/styles.css");
</style>

嗯，@import tip失败了！但是，让我们检查从外部服务器收到的标头

Remote Address: x.x.x.x:x
Request URL: http://www.external-domain.com/styles.css
Request Method: GET
Status Code: 200 OK
+[Request Headers] 10
-[Response Headers] 11
  Accept-Ranges: bytes
  Connection: Keep-Alive
  Content-Encoding: gzip
  Content-Length: 105
  Content-Type: text/css
  ...

正如我们所看到的，我们有样式，但我们无法访问或更改它们。 Chrome和Opera正在说

`Uncaught TypeError: Cannot set property 'color' of undefined`;

Firefox说的相同但更详细

`TypeError: document.styleSheets[0].cssRules[0].style is undefined`

最后，甚至IE11都有相同的意见:)

`SCRIPT5007: Unable to set property 'color' of undefined or null reference. 
File: css.html, Line: 30, Column: 4`

那么，此时还有一件事需要考虑 - CORS请求？！ IE 8 +，Firefox 3.5 +，Chrome 3 +，Opera 12 +，Safari 4+ ...

支持CORS

使用CORS

访问外部域上托管的CSS

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
// Access CSS hosted on external domain using CORS
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function(){
    var xhr = CORSRequest("GET", "http://external-domain/styles.css");
    if (!xhr){ // if CORS isn't supported
        alert("Still using Lynx?");
        return;
    }
    xhr.onload = function() {
        var response = xhr.responseText;
        appendCSS(response);
    }
    xhr.onerror = function() {
        alert('Something went wrong!');
    };
    xhr.send();

    document.getElementById('button').onclick = function() {
        if (document.styleSheets[0].cssRules)
            document.styleSheets[0].cssRules[0].style.color = "black"; 
        else if (document.styleSheets[0].rules)
            document.styleSheets[0].rules[0].style.color = "black";
    };
};

var appendCSS = function(css){
    var s = document.createElement('STYLE');
    s.setAttribute('type', 'text/css');
    if(s.styleSheet)  // IE
        s.styleSheet.cssText = css;
    else  // the rest of the world
        s.appendChild(document.createTextNode(css));
    document.getElementsByTagName('HEAD')[0].appendChild(s);
};

var CORSRequest = function(method, url){
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr){  // Chrome, Firefox, Opera, Safari
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != "undefined"){  // IE
        xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{ // CORS isn't supported
        xhr = null;
    }
    return xhr;
};

</script>
</head>
<body>
    <div class="panel"><b>Text</b></div>
    <input type="button" name="button" id="button" value="Change Color" />
</body>
</html>

就是这样，它有效！刚刚在IE8，IE11，Firefox，Chrome，Opera和Safari上测试过。但是......只有在网络服务器上启用了Access-Control-Allow-Origin，否则你会收到这样的错误

XMLHttpRequest cannot load http://external-domain/styles.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

在我的服务器上它没有启用所以我必须自己做。如果一个人在共享主机上，这可能是个问题。

Off-topic: 如何在Apache上启用Access-Control-Allow-Origin

首先，启用Apache Headers模块

ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

重启Apache

/etc/init.d/apache2 restart

在Apache配置文件的Directory部分下添加以下行

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

或将它们添加到.htaccess文件中。最后两个可以省略。如果您想限制只访问某人，请将上一行中的“*”替换为“www.my-kitchen.com”。另一次重启web-server就是这样。

无法在Google Chrome中访问外部CSS样式

1 个答案:

使用CORS