How to get margin left size using javascript when I use margin auto property in css

Question

I have div with margin:auto; and I need get only margin-left size value using javascript :)

//css
.test{
        margin: auto;
        width: 100px;
        height: 100px;
        outline: 1px solid red;
    }


 // html
        <div class="test">Test</div>

Live example

Answer 1

Use this:

1) With jQuery

var left = $(".test").offset().left;

2) Or, second version is that: Replace your div to <div class="test" id="test"></div> , and use this js.

var left = document.getElementById("test").offsetLeft;

Answer 2

You don't need jQuery for that, plain JavaScript is enough:

var left, element = document.querySelector('.test');
if(element) {
  left = element.getBoundingClientRect().left;  
}

Answer 3

You can use window.getComputedStyle() method if you don't need IE8 support.

 var test = document.querySelector('.test');
 var left_margin = window.getComputedStyle(test).getPropertyValue("margin-left"); // returns margin e.g. '655px'
 left_margin = left_margin.match(/\d+/); //returns bare number e.g. '655'