style.left & offsetLeft

Left is an attribute in a CSS style that specifies the left edge of an element. This property defines the offset between the left margin of the positioning element and the left margin of the containing block. (If the value of the “position” property is “static”, setting the “left” property has no effect.) The W3C School offsetLeft is an attribute of the HTML DOM Element object. The offsetLeft attribute returns the pixel value of the upper-left corner of the current Element offset from the left edge of the HTMLElement.offsetParent node. For details, see MDN. Of course, style.left returns a read-write string with “px”, while offsetLeft returns a read-only number.

Code sample

HTML code:

    <body>
    <img src="images2/pikachu2.jpg" style="left: 0">
    <button>btn</button>
    </body>
Copy the code

The CSS code:

        * {
            padding: 0;
            margin: 0;
        }

        img {
            position: relative;
            margin-left: 300px;
        }
Copy the code

JS code:

Function Animate(el, targetP) {let currentP = el.offsetLeft 10: -10 // Move 10px each time let animateTimer = setInterval(() => {currentP = el.offsetLeft // Retrieve the current position of the element el.style.left = currentP + Step + "px" // When the absolute value of the distance between the target position and the current position is less than the absolute value of the number of steps to move, If (math.abs (targetp-currentp) < math.abs (step)) {el.style.left = targetP + "px" clearInterval(animateTimer) } }, 15) } let image = document.querySelector("img") let btn = document.querySelector("button") btn.addEventListener("click",  () => { Animate(image, 200) })Copy the code

Animate(EL, targetP) moves the corresponding DOM element horizontally to a specified position. Animate(Image, 200) the purpose of Animate(image, 200) is to move an image horizontally to a 200px position. But the result of the above code is that the image keeps moving to the right and never stops.



At line 27, the style.left value is 0 and offsetLeft value is 300.When the program runs to line 30, the style.left value of the image object is 290 and its offsetLeft value is 590. Continuing with the program, we find that offsetLeft is always 300 larger than style.left.

This is because the image element has a 300px margin-left value, so the upper left corner of the element itself is 300px from the browser’s green vertical line, and the left margin of the element itself is 300px from the browser’s blue vertical line. The parent of the image element is body, so its parent node/box containing the image is body itself. The left margin of body is on the blue vertical line, so style.left=0, and offsetLeft = margin-left 300; At the breakpoint of line 30 in the second image, after 28 lines, the image has moved horizontally to the position left=290px, that is, 290px from the green vertical line of the first image. At this point, the distance offsetLeft from the upper left corner of the image to the left edge of the body (300+290=590) is 300+290=590, so the two values are always not equal.

After the code example is modified

So how do you make sure they’re equal? Naturally, it is necessary to ensure that the blue and green of the first image are on the same vertical line, that is, the left margin of the image and the top left corner of the image are on the same vertical line, that is, to remove the value of margin-left. If you really want margin-left, You can also put a relative position around the image div and set the margin-left attribute to that div. The left edge of the image, the left edge of the image element, and the left edge of the image element’s parent are all on the left edge of the div.

<head> <meta charset=" utF-8 "> </title> margin: 0; } div { position: relative; margin-left: 300px; left: 50px; } img { position: relative; } </style> </head> <body> <div><img src="images2/pikachu2.jpg"></div> </body>Copy the code

Js part of the code will not change.

conclusion

In the case discussed in this article, if the margin-left attribute of the current element is set, style.left and offsetLeft are equal in value, otherwise they are equal.