admin管理员组文章数量:1401658
So i have the following code
<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.
So basically this code works in IE and Mozilla, but not in Chrome. Actually, when you run document.styleSheets[0].cssRules it returns an CSSRulesList Object(in IE and Mozilla), but in Chrome it returns null. Btw, for embedded styles this object seems to work even in Chrome.
So is this feature actually not available in Chrome? If so, is there a Chrome alternative that enables you to work with external style sheets/files using Javascript?
So i have the following code
<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.
So basically this code works in IE and Mozilla, but not in Chrome. Actually, when you run document.styleSheets[0].cssRules it returns an CSSRulesList Object(in IE and Mozilla), but in Chrome it returns null. Btw, for embedded styles this object seems to work even in Chrome.
So is this feature actually not available in Chrome? If so, is there a Chrome alternative that enables you to work with external style sheets/files using Javascript?
Share Improve this question asked Jun 29, 2014 at 1:16 user3398216user3398216 891 silver badge5 bronze badges 01 Answer
Reset to default 5The alternative
document.styleSheets[0].rules[0].style.color = "blue";
This snippet could be helpful to see which collection is supported. It is remended to use the cssRules collection first and if it is not supported, then use the rules collection.
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";
EDIT
The snippet below works as expected on IE8, IE11, Firefox, Chrome, Safari and Opera; on my local and production server; it also works on jsbin; but it doesn't work on jsfiddle - on any of the above browser!
<!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>
If I change the style section to this
<link rel="stylesheet" type="text/css" href="http://external-server/styles.css" />
the snippet above works only on IE11. So, it seems to be a cross-domain policy issue since Firefox is saying 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.
Maybe the following snippet could solve the issue
<style type="text/css">
@import url("http://external-domain/styles.css");
</style>
Well, the @import tip failed! But let's check the headers received from the external server
Remote Address: x.x.x.x:x
Request URL: http://www.external-domain./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
...
As we can see, we have the styles but we can't access or change them. Chrome and Opera are saying
`Uncaught TypeError: Cannot set property 'color' of undefined`;
Firefox is saying the same but in more details
`TypeError: document.styleSheets[0].cssRules[0].style is undefined`
and finally, even IE11 has the same opinion :)
`SCRIPT5007: Unable to set property 'color' of undefined or null reference.
File: css.html, Line: 30, Column: 4`
Well, at this moment there's one more thing to consider - a CORS request?! CORS is supported on IE 8+, Firefox 3.5+, Chrome 3+, Opera 12+, Safari 4+ ...
Access CSS hosted on external domain using CORS
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
// Access CSS hosted on external domain using CORS
// http://stackoverflow./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>
That's it, it works! Just tested on IE8, IE11, Firefox, Chrome, Opera and Safari. But... only if the Access-Control-Allow-Origin is enabled on the web-server, otherwise you'll get an error like this
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.
On my server it wasn't enabled so I had to do it myself. This may be a problem if one is on shared hosting.
Off-topic: How to enable Access-Control-Allow-Origin on Apache
First, enable the Apache Headers module
ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load
Restart Apache
/etc/init.d/apache2 restart
Under the Directory section of your Apache config file add these lines
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"
or add them in a .htaccess file. The last two may be omitted. If you want to limit access to only someone, replace the "*" from the previous line to, let's say, "www.my-kitchen.". Another restart of web-server and that's it.
本文标签： javascriptExternal CSS styles cant be accessed in Google ChromeStack Overflow
版权声明：本文标题：javascript - External CSS styles cant be accessed in Google Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744286405a2598901.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论