Using dynamic styling information
The CSS Object Model (CSSOM), part of the DOM, exposes specific interfaces allowing manipulation of a wide amount of information regarding CSS. Initially defined in the DOM Level 2 Style recommendation, these interfaces forms now a specification, CSS Object Model (CSSOM) which aims at superseding it.
In many cases, and where possible, it really is best practice to dynamically manipulate classes via the
style object exposes the
Stylesheet and the
CSSStylesheet interfaces. Those interfaces contain members like
parentStyleSheet for accessing and manipulating the individual style rules that make up a CSS stylesheet.
To get to the
style objects from the
document, you can use the
document.styleSheets property and access the individual objects by index (e.g.,
document.styleSheets is the first stylesheet defined for the document, etc.).
Modify a stylesheet rule with CSSOM
The list of properties available in the DOM from the style property is given on the DOM CSS Properties List page.
To modify styles to a document using CSS syntax, one can insert rules or insert
<script> tags whose
innerHTML property is set to the desired CSS.
Modify an element's style
style property (see also the section "DOM Style Object" below) can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set in-line (e.g,
<td style="background-color: lightblue"> returns the string "
background-color:lightblue", or directly for that element using
element.style.propertyName, even though there may be other styles on the element from a stylesheet).
Also, when you set this property on an element, you override and erase any styles that have been set elsewhere for that element's particular property you are setting. Setting the border property, for example, will override settings made elsewhere for that element's border property in the head section, or external style sheets. However, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example.
To change a particular element's style, you can adapt the following example for the element(s) you want to style.
getComputedStyle() method on the
document.defaultView object returns all styles that have actually been computed for an element. See Example 6: getComputedStyle in the examples chapter for more information on how to use this method.
DOM Style Object
style object represents an individual style statement. Unlike the individual rules available from the
document.styleSheets collection, the style object is accessed from the
document or from the elements to which that style is applied. It represents the in-line styles on a particular element.
More important than the two properties noted here is the use of the
style object to set individual style properties on an element:
The media and type of the style may or may not be given.
Using the setAttribute method
Note that you can also change style of an element by getting a reference to it and then use its
setAttribute method to specify the CSS property and its value.
var el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;');
Be aware, however, that
setAttribute removes all other style properties that may already have been defined in the element's style object. If the
some-element element above had an in–line style attribute of say
style="font-size: 18px", that value would be removed by the use of
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.