JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

As you can see in Figure 15-5, the text remains underlined even though we‘ve set the inline
style property to ―none.‖ The reason is that there is a CSS rule in the document-wide style
sheet that overrides the inline setting using !important. However, alerting the style value
clearly shows that the value for textDecoration is none, which is somewhat confusing.
Figure 15-5: Computed style and actual style may vary
Getting the actual style applied to an object can be tricky. In DOM2-compliant browsers, you
can use the getComputedStyle() method of the document‘s default view. A document‘s default
view is its default representation in the Web browser, that is, its appearance once all style rules
have been applied. The getComputedStyle() method takes two arguments: a node for which
style should be gotten and the pseudo-element (e.g., ―:hover‖) of interest (or the empty string
for the normal appearance). You might get the style of the paragraph in the previous example
with
var p = document.getElementById("para");
var finalStyle = document.defaultView.getComputedStyle(p, "");
To examine individual properties, use the getPropertyValue() method, which takes a string
indicating the property of interest:
alert("The paragraph's actual text decoration is: " +
finalStyle.getPropertyValue("text-decoration"));
Unfortunately, as you get into the more esoteric aspects of DOM2, browser support varies
significantly from vendor to vendor. Even worse, under IE6 and earlier you won‘t find support
for this approach but instead will be required to use currentStyle to calculate an object‘s
current property values. We present an example that works both with the proprietary and DOM
syntax here.