Solution to Get Value with div.style.left in JavaScript

I. Problem Summary:

　　　 The style must be written directly inside the element to be able to retrieve the attribute value directly through div.style.left (that is, it must be inline style), and styles defined in CSS cannot be retrieved in this way.

　　 to move the element to200 stop

setTimeout(function () {  
  var div = document.getElementById("div"4");
  //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);

II. The Difference Between offsetLeft and left(About offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)

　　 1.Only elements that define the position: relative or absolute attribute have the left property, and all elements have the offsetLeft property.

　　 2.The left property can only be obtained through div.style.left if left is set in the inline style of the element; offsetLeft can be directly obtained through div.offsetLeft.

　　 3.left is readable and writable, and the value obtained is a string; offsetLeft is read-only, and the value obtained is a number.

　 Similarities: The positioning method is the same. If the parent element sets a positioning element (position set to relative or absolute), it is positioned relative to the positioning element; otherwise, it is positioned relative to the root element.

Three, Case:

　　　 HTMLElement.offsetParent is a read-only property that returns a reference to the closest (closest, indicating the closest in the hierarchy) positioning element that contains the element. If there is no positioned element, the offsetParent is the closest table element object or the root element (in standard mode it is html; in quirks mode it is body). When the element's style.display is set to "none", offsetParent returns null. offsetParent is very useful because offsetTop and offsetLeft are relative to its padding boundary.

　　　 The parent element of the following span has not set a positioning element, so the offsetParent of this element is the root element. At this time, the offsetTop is positioned relative to the root element.

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1>
 <span>Short span. </span>
 <span id="long">Long span that wraps within this 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");
 //
 // The value of long.offsetLeft is the offsetLeft of span.
 // span is an inline element, it does not have absolute positioning, but still defaults to offsetParent as the parent element, not the root
 //
 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>

If a positioning attribute is added to the parent element of long, the result will be as follows:

　Summary:

　　 It is very convenient to get the offset value of an element through the offsetLeft (offsetTop) method in JavaScript, and the value obtained is a number; to change the offset value of an element, use style.left (top, right, bottom). The value obtained through style.left is a string. If you want to change the position of an element through style.left, you must first convert the current left value obtained into a number by parseInt.

The solutions mentioned above are the methods introduced by the editor to solve the problem that the value cannot be obtained through div.style.left in JavaScript. I hope it will be helpful to everyone. If you have any questions, please leave me a message.

Declaration: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content artificially, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)