Get a css property in javascript on page load

Question

I m trying to get a css property on page load but as you can see below, it never shows the display but it shows correctly if I change it. My question is how can I display the "block" on Display 1?

Thanks for your help

let hello = document.getElementById('hello');

document.getElementById('you').innerHTML += hello.style.display;

hello.style.display = "inline-block";

document.getElementById('too').innerHTML += hello.style.display

#hello {
  background-color:yellow;
  height:20px;
  display:block;
}

<div id="hello">Hello</div>
<div id="you">Display 1: </div>
<div id="too">Display 2: </div>

Jeff McMahan · Accepted Answer · 2021-03-17 19:06:49Z

2

.style reads from the inline styles of an element (as in <div style="...">), not the stylesheet. You can use hello.getBoundingClientRect().height to read the height of a DOM element.

Alternatively, you could use getComputedStyle:

const styles = window.getComputedStyle(hello)
const height = styles.getPropertyValue('height')

answered Mar 17, 2021 at 19:06

Jeff McMahan

1,32312 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chuug Over a year ago

I needed to get the display value and your getBoundingClientRect() doesn't work for it so I edited my post The getComputedStyle is what I needed, thanks :)

Collectives™ on Stack Overflow

Get a css property in javascript on page load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related