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";
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #