Introduction to HTML DOM style property in JavaScript

published: 07 May 2022

2 min read

The style property is used to get as well as set the inline style of a DOM element using different CSS properties. It returns a CSSStyleDeclaration object, which contains a list of all CSS properties defined in the element's style attribute.

The style property is extremely helpful to dynamically change the visual representation of an HTML element using JavaScript. You can set almost all the styles for the elements like colors, fonts, text alignments, margin, borders, background images, sizes, and more. Inline-styles are applied directly to the HTML element using the style attribute without any effects on the adjacent elements.

Syntax

To access the style property, you can use the getElementById() method as shown below:

const elem = document.getElementById('sidebar');
 
// get CSS property
console.log(elem.style.display);

// set CSS property
elem.style.display = 'block';

Take a look at this guide to learn about different methods to access DOM elements in JavaScript.

Examples

The following example demonstrates how to change the color and font CSS properties of an HTML element with id='about' using the style property:

const elem = document.getElementById('about');
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

The above code will change the text color of the HTML element to blue, make it bold, and set the font size to 18px.

You can not set a CSS property by assigning a string directly to the style property:

// set property directly (wrong)
elem.style = 'color: blue';

The style property is ready-only, as the style attribute returns a read-only CSSStyleDeclaration object. Instead, you can use the style property to set or get the individual CSS property. Preferably, you should use the style property to set specific styles to an HTML element without changing other style values.

To completely override the existing inline styles for an element, the style property provides the cssText attribute:

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

Alternatively, you can use the element's setProperty() method to specify style attribute value:

elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');

Take a look at this guide to find out all CSS properties accessible using the style property.

Note: The style property is only useful to get the style rules set in the element's inline style attributes .e.g. <div>, and not those that come from elsewhere, such as style rules defined using the <style> elements, or external style sheets.

Naming Conventions

As you can see above, the JavaScript way of setting CSS properties is slightly different than the CSS. Many CSS properties contain hyphen (-) in their names such as font-weight, font-size, text-align, etc. Since hyphen is a reserved operator and interpreted as a minus sign in JavaScript, it is impossible to use hyphen in the expression .e.g. elem.style.font-size='12px'.

Therefore, in JavaScript, the CSS property names are in the camel-case. The hyphens are removed and the immediate letter after each hyphen is capitalized. For example, the CSS property font-size becomes the DOM property fontSize, background-color becomes backgroundColor, border-left-color becomes borderLeftColor, and so on.

Are we missing something? Help us improve this article. Reach out to us.

Introduction to HTML DOM style property in JavaScript

Syntax

To access the style property, you can use the getElementById() method as shown below:

const elem = document.getElementById('sidebar');
 
// get CSS property
console.log(elem.style.display);

// set CSS property
elem.style.display = 'block';

Take a look at this guide to learn about different methods to access DOM elements in JavaScript.

Examples

The following example demonstrates how to change the color and font CSS properties of an HTML element with id='about' using the style property:

const elem = document.getElementById('about');
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

The above code will change the text color of the HTML element to blue, make it bold, and set the font size to 18px.

You can not set a CSS property by assigning a string directly to the style property:

// set property directly (wrong)
elem.style = 'color: blue';

To completely override the existing inline styles for an element, the style property provides the cssText attribute:

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

Alternatively, you can use the element's setProperty() method to specify style attribute value:

elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');

Take a look at this guide to find out all CSS properties accessible using the style property.

Note: The style property is only useful to get the style rules set in the element's inline style attributes .e.g. <div>, and not those that come from elsewhere, such as style rules defined using the <style> elements, or external style sheets.