Scripting Imported Style Sheets

You can script an imported style sheet(included with an @import directive).

Replace the <link> element with a <style> element that imports eight.css like so:

snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scripting CSS</title>
    <style type="text/css">
        @import url(eight.css);
    </style>
</head>
<body>
    <div id="running">
        <h4>Running</h4>
        <ul class="blue">
            <li><a id="adidas" href="http://www.adidas.com">adidas</a></li>
            <li><a id="asics" href="http://www.asics.com">ASICS</a></li>
            <li><a id="brooks" href="http://www.brooksrunning.com">Brooks</a></li>
            <li><a id="newBalance" href="http://www.newbalance.com">New Balance</a></li>
            <li><a id="nike" href="http://www.nike.com">Nike</a></li>
            <li><a id="saucony" href="http://www.saucony.com">Saucony</a></li>
        </ul>
    </div>
</body>
</html>

An @import rule does not have a selectorText or style member because an @import rule does not implement the CSSStyleRule interface but instead implements CSSImportRule.

This interface provides three members:

href
media
styleSheet

styleSheet refers the imported style sheet.

If we want to change left to 500px for the running <div>, we can do so by below code.

document.getElementsByTagName("style")[0].sheet.cssRules[0].styleSheet.cssRules[2].style.left = "500px";

This works for Firefox, Safari, and Opera. But it doesn’t work for Internet Explorer, which does not implement CSSImportRule. Rather, for a <style> or <link> element, styleSheet.imports contains a collection of imported style sheets.

So, we would rewrite the previous sample like so.

document.getElementsByTagName("style")[0].styleSheet.imports[0].rules[2].style.left = "500px";