Как получить значение left-property для CSS с помощью JavaScript

Ответ 1

Проблема заключается в том, что someElement.style.left работает только в том случае, если у вас встроенный стиль. Поскольку вы применяете свой стиль через таблицу стилей, вы не сможете получить значение так, как вы ожидаете.

У вас есть несколько других подходов, которые вы могли бы предпринять, чтобы получить значение через JavaScript:

window.getComputedStyle:

Можно получить вычисленный стиль элемента с помощью window.getComputedStyle, проблема в том, что он имеет довольно ограниченную поддержку (IE9 +), Если вы все еще хотите использовать его, вы можете обернуть его функцией, чтобы сделать его немного легче получить каждое свойство:

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");

Рабочий пример

jQuery (или некоторая другая библиотека):

Другой вариант - использовать библиотеку JavaScript, такую ​​как jQuery (или что вы предпочитаете), которая предоставит вам кросс- браузера для получения значения.

С помощью jQuery вы можете использовать метод .css() для чтения CSS-свойства элемента.

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

Рабочий пример

Ответ 2

Вы должны называть это

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

когда документ загружен, если вы его вызываете раньше, он вернет null, потому что элемент еще не существует. Таким образом, вы можете использовать jQuery, чтобы определить, когда загружается весь контент.

$(function() {
    //put your code here
});

Ответ 3

Проблема заключается в том, что, поскольку CSS загружается отдельно от JS, нет официального способа гарантировать, что свойство style.left будет точным. Свойством style.left является другое переопределение стиля с более высоким приоритетом.

Вам понадобится функция getComputedStyle.

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

Пример:

var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");

Ответ 4

Возможно, вам придется вызывать свои функции после готовности документа.

Если вы используете jQuery, вы можете найти значение слева быстрее:

 $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });