How to Get the CSS Left-Property Value of a Div Using JavaScript

How to get the CSS left-property value of a div using JavaScript

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

How to get CSS left property value on second element of anchor

eq() accesses elements by their index, which is zero-based. Therefore to get the second element you need :eq(1).

console.log($("#sqm-id").find("a:eq(1)").css("left"));

Updated fiddle

How to get values of left/right/top/bottom properties in pixel using javascript?

Use this code

window.onload = function(){  var test = document.getElementById("test");    var left = test.offsetLeft;  var right = test.offsetWidth - left;  var top = test.offsetTop;  var bottom = test.offsetHeight - top;    document.write("Left:" + left + "//");   document.write("Right:" + right + "//");   document.write("Top:" + top + "//");  document.write("Bottom:" + bottom);};

#test{    position: absolute;}

<div id="test">    <p>Dummy text</p></div>

Setting top and left CSS attributes

Your problem is that the top and left properties require a unit of measure, not just a bare number:

div.style.top = "200px";
div.style.left = "200px";

Trouble getting left value from parent div having display: flex

I simply try to get your code work as naively as possible like this:

$(".btn").click(function(){
    var position = $(this).position();
    var pos_left = position.left;
    var elementWith = $(this).outerWidth();
    $(".result").html(pos_left);
    $(".animation").css("left", pos_left);
    $(".animation").width(elementWith)
});

.wrapper {
    position: relative;
}

.container {
    display: flex;
    width: min-content;
    justify-content: center;
    background: rgba(255, 255, 255, 0);
    border: 2px black solid;
}
.btn {
    background-color: rgba(255, 255, 255, 0);
    color: green;
    max-width: 110px;
    width: 100%;
    height: 30px;
    font-size: 12px;
    border: 2px green solid;
    border-color: yellowgreen;
    white-space: nowrap;
}

.animation {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 34px;
    background: red;
    z-index: -1;
    transition: 0.4s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="btn">Box 1</div>
        <div class="btn">Box 2</div>
        <div class="btn">Boxie 3</div>
        <div class="btn">Boxie box 4</div>
    </div>
    <div class="animation"></div>
</div>
<div class="result"></div>

how to set the css left property of a class on the basis of an ID of a tag

I have analyzed further and got the resolution. Below is the result that I was expecting before:

// This variable will contain the left position value for the starting month in the priority's time frame 
var monthLeftPosition = $('#servicePlanMonths').find('#sp_month_' + startingMonth).position().left;

$(curelement).find('.bar-steps').offset({ left: monthLeftPosition });

Why does jQuery .css('left') and .position().left return different values?

The left returns calculated value of the CSS left property.

position().left returns the x-coordinate relative to the element's first offset parent.

These values can be equal and they can be not equal .

position().left can also easily be different between browsers because of different rendering whereas .css("left") can only differ in the units given, if that.

How to Get the CSS Left-Property Value of a Div Using JavaScript