External CSS styles cant be accessed in Google Chrome

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?

Answers


The alternative

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

This snippet could be helpful to see which collection is supported. It is recommended 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.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
  ...

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.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>

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.com". Another restart of web-server and that's it.


Need Your Help

UIScrollView on top of UIScrollView

ios objective-c uiscrollview

I am making an app which has a scroll view between three view controllers. I am making a help menu that should appear on top of the scroll view, as another scroll view, containing 3 images that exp...

Rangy: word under caret (again)

javascript dom rangy

I'm trying to create a typeahead code to add to a wysihtml5 rich text editor.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.