javascript

Chapter 10: The Document Object Model
Loading styles via an external file is asynchronous, so the styles will load out of order with the JavaScript
code being executed. Typically it ’ s not necessary to know when the styles have been fully loaded; however,
there are some techniques to accomplish this using events. These techniques are discussed in Chapter 12 .
The other way to define styles is using the < style > element and including inline CSS, such as this:
< style type=”text/css” >
body {
background-color: red;
}
< /style >
Logically, the following DOM code should work:
var style = document.createElement(“style”);
style.type = “text/css”;
style.appendChild(document.createTextNode(“body{background-color:red}”));
var head = document.getElementsByTagName(“head”)[0];
head.appendChild(style);
This code works in Firefox, Safari, Chrome, and Opera, but not in IE. IE treats < style > nodes as special,
similar to < script > nodes, and so won ’ t allow access to its child nodes. In fact, IE it throws the same
error as when you try to add a child node to a < script > element. The workaround for IE is to access the
element ’ s styleSheet property, which in turn has a property called cssText that may be set to CSS
code (both of these properties are discussed further in the next chapter), as this code sample shows:
var style = document.createElement(“style”);
style.type = “text/css”;
try{
style.appendChild(document.createTextNode(“body{background-color:red}”));
} catch (ex){
style.styleSheet.cssText = “body{background-color:red}”;
}
var head = document.getElementsByTagName(“head”)[0];
head.appendChild(style);
Similar to the code for adding inline scripts dynamically, this new code uses a try - catch statement to
catch the error that IE throws, and then responds by using the IE - specific way of setting styles. The
generic solution is as follows:
function loadStyleString(css){
var style = document.createElement(“style”);
style.type = “text/css”;
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName(“head”)[0];
head.appendChild(style);
}
310