STYLES

Styles are defined in HTML in three ways: including an external style sheet via the <link> element, defining inline styles using the <style> element, and defining element-specific styles using the style attribute. DOM Level 2 Styles provides an API around all three of these styling mechanisms.

Accessing Element Styles

Any HTML element that supports the style attribute also has a style property exposed in JavaScript. The style object is an instance of CSSStyleDeclaration and contains all stylistic information specified by the HTML style attribute but no information about styles that have cascaded from either included or inline style sheets. Any CSS property specified in the style attribute are represented as properties on the style object. Because CSS property names use dash case (using dashes to separate words, such as background-image), the names must be converted into camel case in order to be used in JavaScript. The following table lists some common CSS properties...