Professional JavaScript For Web Developers

Advanced DOM Techniques
onmouseout=”this.style.backgroundColor = ‘red’”>
When you move the mouse over the red , it changes to blue; when you mouse out, it returns to
red. Note that the event handlers use the this keyword to refer to the itself and gain access to
its style object.
The style object also has a property called cssText that contains the CSS string describing the style of
the element:
Style Example
When you click on the in this example, the text “background-color: red; height: 50px;
width: 50px” displays.
DOM style methods
The DOM also described several methods for the style object, all designed to interact with individual
parts of the CSS style definition:
❑
❑
❑
❑
❑
getPropertyValue(propertyName) — Returns the string value of the CSS property
propertyName. The property must be specified in CSS style, such as “background-color”
instead of “backgroundColor”.
getPropertyPriority() — Returns the string “important” if the CSS property
“!important” is specified in the rule; otherwise it returns an empty string
item(index) — Returns the name of the CSS property at the given index, such as
“background-color”
removeProperty(propertyName) — Removes propertyName from the CSS definition
setProperty(propertyName, value, priority) — Sets the CSS property propertyName
to value with the given priority (either “important” or an empty string)
Here’s a simple example:
Style Example
function useMethods() {
305