JavaScript: The Definitive Guide, 6th Edition

Scripting Inline Styles

The most straightforward way to script CSS is to alter the style attribute of individual document elements. Like most HTML attributes, style is also a property of the Element object, and you can manipulate it in JavaScript. The style property is unusual, however: its value is not a string, but a CSSStyleDeclaration object. The JavaScript properties of this style object represent the CSS properties specified by the HTML style attribute. To make the text of an element e big, bold, and blue, for example, you can use the following code to set the JavaScript properties that correspond to the font-size font-weight and color style properties:

e.style.fontSize = "24pt";
e.style.fontWeight = "bold";
e.style.color = "blue";

Naming Conventions: CSS Properties in JavaScript

Many CSS style properties, such as font-size, contain hyphens in their names. In JavaScript, a hyphen is interpreted as a minus sign, so it is not possible to write an expression like:

e.style.font-size = "24pt"; // Syntax error!

Therefore, the names of the properties of the CSSStyleDeclaration object are slightly different from the names of actual CSS properties. If a CSS property name contains one or more hyphens, the CSSStyleDeclaration property name is formed by removing the hyphens and capitalizing the letter immediately following each hyphen. Thus, the CSS property border-left-width is accessed through the JavaScript borderLeftWidth property, and you can access the CSS font-family property with code ...