# JS Tip of the Day: Setting HTML Element Styles

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-setting-html-element-styles/643124>\
**Category:** web dev\
**Created:** [April 12, 2020, 12:16pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-setting-html-element-styles/643124 "2020-04-12T12:16:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 12, 2020, 12:16pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-setting-html-element-styles/643124/1 "2020-04-12T12:16:31Z")

</div>

**Setting HTML Element Styles**  
Level: Beginner

In JavaScript, you can set css styles for an element using its `style` property. This mirrors the `style` attribute in HTML but with a couple of important differences.

First, the `style` property is an object in JavaScript, not a string value as it is in the HTML attribute. This object is a CSSStyleDeclaration object with each of the individual style declarations defined as properties of that object.

```html
<div id="warning" style="color: red">
Danger, Will Robinson!
</div>

<script>
let warning = document.getElementById('warning');
console.log(typeof warning.style); // object
console.log(warning.style.color); // red
</script>

```

You can access the string representation of the style if you want through the `cssText` property of `style`. This can also be set. Doing so would be equivalent to setting the `style` attribute.

```html
<div id="warning" style="color: red">
Danger, Will Robinson!
</div>

<script>
let warning = document.getElementById('warning');
console.log(warning.style.cssText); // color: red
warning.style.cssText = 'color: orange';
console.log(warning.getAttribute('style')); // color: orange
</script>

```

Secondly, you can access declaration property names by their camelCase names rather than their hyphen-case names. For example, `margin-left` in the `style` object would be accessible as `style.marginLeft`.

```html
<blockquote id="indented" style="margin-left: 2em">
640K ought to be enough for anybody.
</blockquote>

<script>
let indented = document.getElementById('indented');
console.log(indented.style.marginLeft); // 2em
indented.style.marginLeft = '5px';
console.log(indented.style.marginLeft); // 5px
</script>

```

Notice that the values being used for CSS measurements is a string which includes the numeric value and a unit. If you need to get a number value from the CSS, you may need to parse the string into a number first being sure to make the appropriate conversions for the units specified.

Lastly, if you need to remove a declaration, you can set its property to an empty string. Using the `delete` keyword will not work. You can also optionally use the `removeProperty()` method, though you’ll want to be sure to use the hyphen-case name of the property you’re removing.

```html
<span id="stylish" style="font-weight: bold; font-style: italic">
Stylish!
</span>

<script>
let stylish = document.getElementById('stylish');
stylish.style.fontWeight = ''; // removes
stylish.style.removeProperty('font-style'); // also removes
console.log(stylish.style.cssText === ''); // true (no properties)
</script>

```

A `setProperty()` method also exists for adding or changing declarations, though its usually easier to set the respective properties directly by name.

More info:

- [style on MDN](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style)
- [CSSStyleDeclaration on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)