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

This article mainly introduces how to use offsetWidth in js. It is very detailed and has a certain reference value. Friends who are interested must finish it!

OffsetWidth usage in js

Width of offsetWidth// return box model (including width+ around padding+ left and right border)

# div1 {width:200px;height:200px;border:2pxsolidred;padding:5px;margin:1px;background:green;}

The offsetWidth of the above div1 is width+2*padding+2*border=200+2*5+2*2=214px

Ps:offsetLeft=left+margin-left

OffsetTop=top+margin-top

OffsetWidth is different from other properties

Note: the following element attributes and methods are passed through elem. Property or elem. Method, the window property is used through window. Property is used, and the document property is called through document.

/ *

* element View Properties

* offsetWidth horizontal width+ left and right padding+ border-width

* offsetHeight vertical height+ up and down padding+ up and down border-width

*

* clientWidth horizontal width+ around padding

* clientHeight vertical height+ upper and lower padding

*

* offsetTop gets the distance from the current element to the top direction of the positioning parent node

* offsetLeft gets the distance from the current element to the left direction of the positioning parent node

*

* the true width of the content of the scrollWidth element. If the content does not exceed the height of the box, it is the clientWidth of the box.

* the true height of the content of the scrollHeight element. It is the clientHeight of the box if the content does not exceed the height of the box.

*

* end of element view property

*

The above is all the contents of the article "how to use offsetWidth in js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.