How to access element Style using JS?

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

var x = element.style.position;

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

--->x
<---""

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

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

Sure @RandellDawson !

<html>
<style>
	.demo{
		height:300px;
		width:300px;
		position:fixed;
		background-color:orange;
	}
</style>
	<body>
		<div class="demo">
			
		</div>
	</body>
</html>

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");
–>x.style.background

//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");
x.style['background-color'] // 'orange'