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";

Get JavaScript: The Definitive Guide, 6th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.