# Introduction to HTML DOM style property in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 1, 2020, updated Jul 30, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-style-property

> An short guide to learn what is DOM style property and how to use it to set different CSS properties in JavaScript.

The `style` property is used to get as well as set the **inline** style of a [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) 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:

```javascript
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](https://attacomsian.com/blog/getting-dom-elements-javascript) 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:

```javascript
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:

```javascript
// 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:

```javascript
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:

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

Take a look at [this guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) 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 style="color: blue">`, 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.