How to access element Style using JS?

Im trying to store the position of an elemnt to a variable like so

var x =;

but if i try to view it in the console, it showed this


Basically it returns “” , intead of the real position of the element

You will need to show us the rest of your code.

Sure @RandellDawson !

		<div class="demo">

Try Running that document in your browser… now try to access the background of that or any property…

like so,

–>var x = document.querySelector(".demo");

//and it will return

<-- “”

Instead of the background which is orange

What you want is the computedStyle (after CSS is applied).

var x = document.querySelector(".demo");
var computedStyleOfX = window.getComputedStyle(x, null);
computedStyleOfX['height'] // 300px
computedStyleOfX['background-color'] // rgb(255, 165, 0)

For your code to work, you would have to use an in-line style like:

<div class="demo" style="height:300px; width:300px; position:fixed;background-color:orange;">
var x = document.querySelector(".demo");['background-color'] // 'orange'