An element’s style property is a mutable object initialized from its inline style attribute. Changing its values changes the element’s display. It does not contain styles applied through style sheets; use getComputedStyle to obtain computed styles. section 12.3.1 section 12.5
A few practical details prevent common surprises:
- Use camel case for multiword names with dot notation: CSS font-size becomes style.fontSize. A hyphenated name can also be accessed with bracket notation, such as style['font-size']. section 12.3.2
- Values reflect inline declarations and script assignments, not styles from style sheets. A value such as #000 may be normalized to rgb(0, 0, 0) by the browser. section 12.3.1
- Read a value with element.style.fontSize; assign one with element.style.borderWidth = '4px'. A small helper can convert hyphenated names and support both getting and setting. section 12.3.1 section 12.3.2
Listing 12.6. Examining the style property
<style> #A
div { font-size: 1.8em; border: 0 solid gold; }
</style>
<div style="color:#000;" title="Ninja power!"> #B
忍者パワー
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const div = document.querySelector("div");
assert(div.style.color === 'rgb(0, 0, 0)' || #C
div.style.color === '#000',
'color was recorded');
assert(div.style.fontSize === '1.8em', #D
'fontSize was recorded');
assert(div.style.borderWidth === '0', #E
'borderWidth was recorded');
div.style.borderWidth = "4px"; #F
assert(div.style.borderWidth === '4px', #G
'borderWidth was replaced');
});
</script>
The example compares an inline color with styles from a style sheet, then changes the border width through the style object. section 12.3.1
