Styles

Updating styles

CSS

element {
  border-color: #000;
  font-family: serif;
}

DOM

element.style.borderColor = "#000";
element.style.fontFamily = "serif";

Be careful

Just because you can change styles, doesn't mean you should.

CSS for presentation, DOM Scripting for behaviour.

But you can make up for deficiencies in browser support for CSS.

Example

View example (JS)

Best practice

Where possible, instead of updating an element's styles directly, give it a class instead. Then style the class in your CSS file.

Using className

element.className = "myclass"

Revised example

View example (JS)

Repetitive tasks

Adding classes to a document when it would be too tedious to do it by hand.

Example

Style every second row in a table.

View example (JS)

Updating styles

Changing styles in response to user actions.

Example

On a page of FAQs, only display the answer that the user requests.

View example (JS)

Changing styles over time

Animation!

Used to be called DHTML.

Next...

XMLHttpRequest