JavaScript DOM Styling

Styling DOM Elements in JavaScript

You can change or apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. You can set almost all the styles for the elements like, fonts, colors, margins, borders, background images, text alignment, width and height, position, and so on.

In the following section we'll discuss the various methods of setting styles in JavaScript.

How to Set Inline Styles on HTML Elements

Inline styles are applied directly to the specific HTML element using the style attribute. In JavaScript the style property is used to get or set the inline style of an element.

The following example will set the color and font properties of an element with id="intro".

Example of Code

<p id="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" onclick="setStyle()">Set intro paragraph styles</button> 
<script>
function setStyle() {
    // Selecting element
    var elem = document.getElementById("test");         
    // Appling styles on element
    elem.style.color = "blue";
    elem.style.fontSize = "18px";
    elem.style.fontWeight = "bold";
}
</script>

Output

Naming Conventions of CSS Properties in JavaScript

Many CSS properties, such as font-size, background-image, text-decoration, etc. contain hyphens (-) in their names. Since, in JavaScript hyphen is a reserved operator and it is interpreted as a minus sign, so it is not possible to write an expression, like: elem.style.font-size

Therefore, in JavaScript, the CSS property names that contain one or more hyphens are converted to intercapitalized style word. It is done by removing the hyphens and capitalizing the letter immediately following each hyphen, thus the CSS property font-size becomes the DOM property fontSize, border-left-style becomes borderLeftStyle, and so on.

How to Get Style Information from Elements

Similarly, you get the styles applied on the HTML elements using the style property.

The following example will get the style information from the element having id="intro".

Example of Code

<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Getting style information from element
document.write(elem.style.color + "<br>");  // Prints: red
document.write(elem.style.fontSize + "<br>");  // Prints: 20px
document.write(elem.style.fontStyle);  // Prints nothing
</script>

Output

The style property isn't very useful when it comes to getting style information from the elements, because it only returns the style rules set in the element's style attribute not those that come from elsewhere, such as style rules in the embedded style sheets, or external style sheets.

To get the values of all CSS properties that are actually used to render an element you can use the window.getComputedStyle() method, as shown in the following example:

How to add CSS Classes to Elements

You can also get or set CSS classes to the HTML elements using the className property.

Since, class is a reserved word in JavaScript, so JavaScript uses the className property to refer the value of the HTML class attribute. The following example will show to how to add a new class, or replace all existing classes to a <div> element having id="info".

Example of Code

<div id="info" class="disabled">Something very important!</div><script>
var elem = document.getElementById("info");
elem.className = "note";  // Add or replace all classes with note class
elem.className += " highlight";  // Add a new class highlight
</script>

Output