21

My CSS rule looks like this:

#my-div{
    display: none;
    position: absolute;
    left: -160px;
    bottom: -150px;
}

I'm trying to get value of the left-property like this:

  • document.getElementById('my-div').style.left
  • document.getElementById('my-div').offsetLeft

The problem is that both return null. Where is the problem?

freginold
  • 3,946
  • 3
  • 13
  • 28
Kin
  • 4,466
  • 13
  • 54
  • 106

4 Answers4

36

The problem is that someElement.style.left only work if you have inline style. Since you apply your styling through a stylesheet, you will not be able to fetch the value the way you expect.

You have a couple of other approaches you could take to get the value through JavaScript:

window.getComputedStyle:

It is possible to get the computed style of an element using window.getComputedStyle, the problem is that it has quite limited support (IE9+). If you still want to use it you could wrap it up in a function to make it a bit easier to get each property: 

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div", "left");

Working example

jQuery (or some other library):

Another option would be to use a JavaScript library like jQuery (or whatever you prefer), which will provide you with a cross-browser solution to get the value.

With jQuery you could use the .css() method to read the CSS-property of the element.

$(function () {
  var left = $("#my-div").css("left");
});

Working example ​

Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103
  • Does this work is the CSS has not been applied to an element? Can one read the CSS attributes of a CSS class even when the class has not been applied to any elements? – dumbledad Apr 27 '14 at 10:03
  • @dumbledad According to [this](http://stackoverflow.com/a/9382972/678801) SO answer, gecko-based browsers would support creating a new element (without adding it to the DOM) and giving it a class, and then use getComputedStyle on the element to get the CSS. It appears to have limited support in other browsers though (haven't tested it myself). – Christofer Eliasson Apr 28 '14 at 10:06
  • Tried the jquery method, and I got "auto" back as a response. so this is not a universal solution – PBo Nov 29 '17 at 12:59
  • @PBo what css-property did you use it for, in which browser, and what value was you expecting? `auto` is the default value for the `left` property used in the example above for instance. – Christofer Eliasson Nov 30 '17 at 15:52
  • .css("left) property was what I was trying to use. I was using Chrome 60 (I think), It wasnt set and I had some other javascript code manipulating the other css properties. I gave up trying to get it. I think getClientRects return more accurate figures, but I gave up on that route – PBo Dec 02 '17 at 00:17
6

The problem is that, since CSS is loaded separately from the JS, there's no official way to ensure that the style.left property will be accurate. The style.left property is a different, higher-priority style override.

You'll need to use the getComputedStyle function.

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Ex:

var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
Jeffrey Sweeney
  • 5,986
  • 5
  • 24
  • 32
5

You should call this

document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft

when document is loaded, if you call it earlier it will return null because element doesnt exists yet. So you can use jQuery to determine when all content is loaded.

$(function() {
    //put your code here
});
Sh1d0w
  • 9,340
  • 3
  • 24
  • 35
-1

Maybe you have to call your functions after document ready.

If you use jQuery you can find left value faster:

 $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });
Luca Davanzo
  • 21,000
  • 15
  • 120
  • 146