Detailed explanation of the box model in js

1.js box model

refers to obtaining the styles of elements on the page through a series of properties and methods provided in js Information value

Example:

#box has many private properties of its own:

<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>

When it comes to the box model, the first thing that everyone will think of is the CSS box model. The JS box model refers to obtaining the style information value of the elements in the page through a series of properties and methods provided in JS.

## For a #div (which has many private properties of its own) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node .prototype->EventTarget.prototype->Object.prototype

The following are some JS methods

　1, client series (Several private attributes of the current element)

　The width and height of the content: The two styles of width/height we set are the contents. Width and height, if the height value is not set, the height of the container will adapt itself according to the content inside, so that the value obtained is the height of the actual content; if the height is set to a fixed value, no matter whether there is more or less content, in fact we The height of the content refers to the set value.

The width and height of the actual content: This refers to the width and height of the actual content (not necessarily related to the height we set), for example, I set The height is 200px. If the content overflows, the height of the real content is the height of the overflowed content.

　clientWidth/clientHeight Content Width/height + left/right/top and bottom padding (nothing to do with content overflow)

　clientLeft:The width of the left border clientTop:The width of the top border Height (border[Left/Top]Width)

　2. Offset series

offsetWidth/offsetHeight ：clientWidth/clientHeight+left and right/top and bottom borders (it has nothing to do with whether the content overflows)

##　 offsetParent: The parent reference of the current element

##　offsetLeft/offsetTop: The outer boundary of the current element The offset of the border from the inner border of the parent reference object##　3. Scroll series

　

scrollWidth/scrollHeight: exactly the same as our clientWidth/clientHeight (provided that: the content in the container does not overflow) If the content in the container overflows, the results we obtain are as follows

　

scrollWidth: The width of the real content (including overflow) + left padding

　scrollHeigh：The height of the real content (including overflow) + Fill in

# The results obtained are all approximately equal to the value, because: in the same browser, whether we set overflow="hidden" has an impact on the final result; the results obtained in different browsers are also different.

#　scrollLeft/scrollTop: The width and height of the scroll bar

##　

## 2. Issues regarding the value of JS box model attributes

　　我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；

三、关于操作浏览器本身的盒子模型信息

　　clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

　　scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）

　　我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套

　　document.documentElement[attr] || document.body[attr];

　　必须document.documentElement在前

　　例如document.documentElement.clientWidth ||  document.body.clientWidth

　　设置也需要写两套

　　编写一个有关于操作浏览器盒子模型的方法 ，代码如下　

//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

　　

The above is the detailed content of Detailed explanation of the box model in js. For more information, please follow other related articles on the PHP Chinese website!