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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scripting CSS</title>
    <style type="text/css">
        @import url(eight.css);
    <div id="running">
        <ul class="blue">
            <li><a id="adidas" href="">adidas</a></li>
            <li><a id="asics" href="">ASICS</a></li>
            <li><a id="brooks" href="">Brooks</a></li>
            <li><a id="newBalance" href="">New Balance</a></li>
            <li><a id="nike" href="">Nike</a></li>
            <li><a id="saucony" href="">Saucony</a></li>

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";
Related Tutorial
Follow Us #
Contents +