JavaScript retrieving element's CSS values

Question

I'm currently making a basic drag and drop system and need to retrieve the top and left properties of the element being moved. If I do this:

var mover = document.getElementById('mover');
alert(mover.style.top);

Will alert nothing ( ' ' )

Is there any way of retrieving CSS values (in JS) without having to define them with JS first?

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — dfsq, Apr 23 '15 at 07:49
see http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — James LeClair, Apr 23 '15 at 07:50
`mover.style.top` will give you the css value that was attached to the element when the DOM was rendered, it will not give you the current value. — Cristik, Apr 23 '15 at 07:53
`mover.style.top` will return the value in style attribute, not from the *StyleSheet* — romuleald, Apr 23 '15 at 08:09

score 2 · Accepted Answer · answered Apr 23 '15 at 07:56

You will need to use getComputedStyle if you wish to retrieve properties that are computed rather than defined.

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

FROM the MDN link...

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

Tushar Gupta · Answer 2 · 2015-04-23T08:03:18.523

0

You can get the position of the element as position().top, The css values can be retrieved as .css("margin-top") or .css("top")

alert($('#mover').position().top);
alert($('#mover').css("margin-top"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>

Since you dislike jQuery, here is the solution in pure JS

Update :

var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));

  <div id='mover'>dasdasD</div>

edited Apr 23 '15 at 08:03

answered Apr 23 '15 at 07:52

Tushar Gupta

15,504
1
29
47

I dislike jQuery and would rather not use it. – Oliver Apr 23 '15 at 07:58
I'm highly doubtful that your `margin-top` approach will work. – Apr 23 '15 at 08:10
@torazaburo You can use top too its as per need :) – Tushar Gupta Apr 23 '15 at 08:15

score 0 · Answer 3 · answered Apr 23 '15 at 08:10

There are three possible tops to worry about:

The actual top position. Every element has a top resulting from the page layout, whether or not it has a computed value for the top property. Get this with getBoundingClientRect.
The computed value of the CSS property top. Get this with getComputedStyle, as mentioned in other answers
The current style value set on the element for top. Get this with elt.style.top as you attempted.

score -2 · Answer 4 · answered Apr 23 '15 at 07:52

-2

var mover = document.getElementById('mover');
alert(mover.offsetTop);
alert(mover.offsetLeft);

answered Apr 23 '15 at 07:52

chronixlol

29
4

He wants to retrieve the CSS values - not infer them from other values – nicholaswmin Apr 23 '15 at 07:53

JavaScript retrieving element's CSS values

4 Answers4