Skip to main content

Visit Mozilla.org

DOM:CSS

From MDC


[edit] DOM CSS Properties List

The following is a list of the CSS properties that are supported in the Gecko 1.8+ DOM and accessible by means of the style property on elements.

The following example shows the typical use of the element.style property to set a CSS property: 

<html>
<head>
<script>
  function changeStyle()  {
    c = document.getElementById("tid");
    c.style.paddingRight = "20px";
  }
</script>
<table border="1"><tr>
  <td id="tid">Example Cell</td></tr>
</table>
<form>
  <input value="addpad" 
    type="button" 
    onclick="changeStyle();" />
</form>
</html>

CSS styles can be returned or set with the style property and its attributes. However, you cannot set values directly using constructions such as style="background-color: blue", where the string contains both the attribute ("background-color") and the value ("blue"). By itself, the style property should only be used as a "getter" to read values and not a "setter" to change values. In other words, the first of the following two constructions is bad, and the latter is better practice in the DOM:

bad
element.style = "background-color: blue";
good
element.style.backgroundColor = "blue";

Note that the bad example above may actually set the background color of the given element, but this assignment overwrites any style information that already existed on that element, and then cannot be added to or updated without other overwrites. The special style attributes available off of the element's style property allow you to "manage" the style of your elements in a safer and more organized way.

See also: the Element style property. You can check the syntax for the values of these attributes by consulting the DOM CSS specification.

Retrieved from "http://developer.mozilla.org/en/docs/DOM:CSS"