Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of offsetleft attributes for you. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Take offsetLeft as an example, its value varies in different browsers and is related to the position attribute (relative,absolute,fixed) of the parent element. It is explained in the following situations: (the browser versions used in the test are: Chrome68.0.3440.106,opera54.0,Firefox61.0.1 and IE11.0)

What about offsetleft?

When the parent element does not set the position attribute, in Chrome,opera and IE browsers, offsetLeft is the distance from the outside of the element border to the inside of the browser window and body.offsetLeft=0

In the firefox browser, offsetLeft is the distance from the outside of the element border to the inside of the body border width of the body.offsetLeft=- border

When the parent element sets the position element, there are two cases

If the parent element is body and body has the position attribute set, offsetLeft is the distance from the outside of the element border to the outside of the body border in Chrome and opera browsers

In IE and fireForx browsers, offsetLeft is the distance from the outside of the element border to the inside of the body border

If the parent element is not a body element and the position attribute is set, offsetLeft is the distance from the outside of the element border to the inside of the parent element border (consistent across browsers).

Offsetleft instance

The following is illustrated by an example (Chrome browser):

The Html structure is

Css style: set the margin and padding of body,container,box,content to 10px, margin, 300px, 100px, content, 50px, and set the border with the width of 5px. Take a look at the source code below.

Width+padding+ border width of container.offsetWidth=container = 300 × 2 × 10 × 5 × 330

Console.log (container.offsetWidth)

This is the end of this article on "sample Analysis of offsetleft attributes". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.