Detailed explanation of how to obtain left and top values ​​using JavaScript code

The following editor will bring you three methods of obtaining the left value and top value in native js. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

When using js to create dynamic effects, you usually need to obtain the left and top attribute values ​​​​in the absolute positioning of the element. For example, to make a collision advertisement, you need to constantly obtain the top and left attribute values ​​​​of the element.

Things to note: The element that takes the value must set the position:absolute absolute positioning attribute in order to get the left value.

The first method, is relatively simple, that is, directly through obj.style.left and obj.style.top, but it has limitations This method of acquisition can only obtain the left and top attribute values ​​​​of the inline style, but cannot obtain the left and top attribute values ​​​​of the style tag and link external references.

The second method is read-only, can get all styles, there are compatibility issues, in standard browsers you can use window.getComputedStyle(object, null ).left method to get the left and top attribute values ​​of the element. On the IE browser, the obj.currentStyle.left method is used to obtain the attribute value.

The third method, Use obj.offsetLeft to get the left attribute value of the object, and use obj.offsetTop to get the top attribute value of the object.

The above is the detailed content of Detailed explanation of how to obtain left and top values ​​using JavaScript code. For more information, please follow other related articles on the PHP Chinese website!