Dom box model -JS

---

layout: 'page'
title: 'Dom盒子模型'
date: 2019-09-30 17:59:29
tags: JAVASCRIPT
categories: JAVASCRIPT
---

Dom box model attributes 13

• clientWidth / clientHeight: the current width and height of elements in the visual area (no border)

//=>获取当前页面一屏幕(可视区域)的宽度和高度
 document.documentElement.clientWidth || document.body.clientWidth
 document.documentElement.clientHeight ||document.body.clientHeight

• clientTop / clientLeft: Gets the width of the border (on / left)

---

• offsetWidth / offsetHeight: width and height of the current visible region of the element (with border)
• offsetParent: parent reference current box
• offsetTop / offsetLeft: Get the current box outer frame starts from its parent reference the frame offset

---

• scrollWidth / scrollHeight: width and height of the real content (not necessarily a case of setting the value of their own, because there may be content overflow, overflow of the content, the need to overflowing content also count) + Left / PADDING, but approximately equal to a value (and not spill the contents of the same client)

//=>获取当前页面的真实宽高（包含溢出的部分）
 document.documentElement.scrollWidth || document.body.scrollWidth
 document.documentElement.scrollHeight ||document.body.scrollHeight

• scrollTop / scrollLeft: scroll offset (in js box model attributes 13, read-write property is only this, the rest are read-only attribute)

Gets the current element through all browsers calculated style

• Standard browser (IE9 +): window.getComputedStyle ([element], [pseudo-classes, usually written null]) acquired all the current element is calculated browser pattern (object)
• IE6 ~ 8: [element] .currentStyle obtain a computed pattern