Introduction to CSS (Cascading Style Sheets) with JavaScript - JavaScript by Example - page 589

14.11.3 The style Object

The style object contains a set of properties corresponding to the CSS attributes sup-
ported by your browser. Each HTML object has a style property used to access the CSS
style attributes assigned to it; for example, an h1 element might have been defined with
a CSS font-style , color , and padding . The style object has properties to reflect each of the
CSS attributes. See Table 14.13.
Many of the CSS style attributes, such as background-color , font-size , and word-spacing ,
contain hyphens in their names. Like all objects we have seen in JavaScript, there is a con-
vention for spelling the name of the object. The name would not contain a hyphen, and
multiple words after the first word are usually capitalized. Therefore, the CSS naming con-
vention is different with the properties of the style object. The hyphen is removed and the
first letter of each word after the hyphen is capitalized. For example, the CSS attribute,
background-color, when used as a style property, is spelled backgroundColor, font-size is
fontSize, and border-right-width is borderRightWidth.

FORMAT

elementname.style.property="value";

EXAMPLE

div2.style.fontFamily = "arial";

Table 14.13 style Object Properties

HTML Tags
Affected

Property Example CSS Value

Fonts

font 12pt/14pt sans-serif, 80% sans-serif, x-large/110%

arial, normal small-caps

All

fontFamily serif, sans-serif, cursive, fantasy, monospace All

fontSize 12pt, larger, 150%, 1.5em All

fontStyle normal, italic, oblique All

fontVariant normal, small-caps All

fontWeight normal, bold, bolder, lighter, 100, 200...900 All

Continues