Решение проблемы с получением значения с помощью div.style.left в JavaScript

Первый раздел: обобщение проблемы

　　　 Стиль должен быть написан напрямую в элементе, чтобы получить значение свойства через div.style.left (т.е. это должны быть внутрисимвольные стили), стили, определенные в css, не могут быть получены таким образом.

　　 Переместите элемент до остановки в 200

setTimeout(function () {  
  var div = document.getElementById("div4");
  //var left = parseInt(div.style.left) + 5;
  var left = div.offsetLeft + 5;
  div.style.left = left + "px";
  if (left < 200) {
    setTimeout(arguments.callee, 50);
  }
}, 50);

Второй раздел: различия между offsetLeft и left(О offsetLeft:https://developer.mozilla.org/ru/docs/Web/API/HTMLElement/offsetLeft)

　　 1. Элементы с определенными свойствами position: relative или absolute имеют свойство left, у всех элементов есть свойство offsetLeft.

　　 2. Внутренний стиль элемента устанавливает left, чтобы получить его через div.style.left; offsetLeft напрямую через div.offsetLeft.

　　 3.left читаемый и قابل к записи, возвращает строку; offsetLeft только чтение, возвращает число.

　 Общие черты: способ привязки одинаковый, если родительский элемент установлен элемент привязки (position установлен в relative или absolute), то он привязан к элементу привязки, в противном случае привязан к корневому элементу.

Третий раздел:

　　　 HTMLElement.offsetParent - это только чтение свойство, возвращающее ближайший (closest, что означает ближайший по уровню вложенности) элемент привязки, содержащий этот элемент. Если нет элементов привязки, то offsetParent является ближайшим table элементом или корневым элементом (в стандартном режиме это html; в режиме quirks - body). Если style.display элемента установлен в "none", то offsetParent возвращает null. offsetParent очень полезен, так как offsetTop и offsetLeft являются относительными к его границам отступа.

　　　 Следующий span у родителей не установлен элемент привязки, поэтому offsetParent этого элемента является корневым элементом, и此时的 offsetTop привязан к корневому элементу.

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
 <span>Short span. </span>
 <span id="long">Long span, который обертывает этот div.</span>
 </div>
<div id="box" style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 //
 // Значение long.offsetLeft это offsetLeft span
 // span - это блок форматирования, у него нет абсолютной привязки, но по умолчанию offsetParent является родительским элементом, а не корнем
 //
 box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = long.offsetTop + document.body.scrollTop + "px";
 box.style.width = long.offsetWidth + "px";
 box.style.height = long.offsetHeight + "px";
</script>

Если добавить свойство позиционирования к родительскому элементу long, результат будет следующим:

　Четыре: Заключение:

　　 Получение значения смещения элемента с помощью метода offsetLeft (offsetTop) в JavaScript очень удобно, и вы получите числовое значение; для изменения значения смещения элемента используйте style.left (top, right, bottom), значение, полученное с помощью style.left, является строкой; если вы хотите изменить положение элемента с помощью style.left, сначала преобразуйте текущее значение left в числовое значение с помощью parseInt.

Вот решение, которое я предлагаю вам для решения проблемы, когда вы не можете получить значение с помощью div.style.left в JavaScript, надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставляйте комментарии.

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент был предоставлен пользователями Интернета, сайт не имеет права собственности, не был отредактирован вручную, не несет ответственности за связанные с этим法律责任. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @), и предоставьте соответствующие доказательства. Если事实确实如此， сайт незамедлительно удалил涉嫌侵权的内容.