JavaScript盒子模型

最后更新于:2018-03-24 23:24:59

css盒子模型请参考:Css盒子模型和margin兼容问题

JS盒子模型指的是通过JS中提供的一系列属性和方法,获取页面中元素的样式信息值。

client系列

  • clientHeight:内容的高度 (width)+ 上下padding
  • clientWidth:内容的宽度 (height)+ 上下padding
  • clientLeft:盒子左边框宽度(border-left)。
  • clientTop:盒子上边框宽度(border-top)。

Ps:和内容溢出没有关系

offset系列

值是Number类型

  • offsetWidth = width + padding + border
  • offsetHeight = height + padding + border
  • offsetLeftoffsetTop:当前元素的边框距离父级参照物的内边框的偏移量。
  • offsetParent:当前元素父级参照物(有定位),可以修改。

Ps:和内容溢出没有关系

scroll系列

在内容没有溢出的情况下:

  • scrollWidth / scrollHeight = clientWidth / clientHeight

在内容溢出的情况下:

  • scrollWidth / scrollHeight = 真实内容的宽度 + padding

Ps:获取到的值都是估值

  1. 在同一个浏览器下是否设置overflow:hidden对结果有影响。
  2. 在不同浏览器下获取的值也不相同。
  • scrollTop / scrollLeft:滚动条卷起的高度/宽度。

小知识点

  1. 值是Number类型,个人理解是为了便于计算。
  2. 都是整数,浏览器取值的时候会进行四舍五入。
  3. 获取当前页面的可视窗口:clientWidth / clientHeight
  4. 当前页面的真实高度:scrollWidth / scrollHeight
  5. 操作浏览器盒子模型兼容写法。
document.documentElement[attr] || document.body[attr]

// for exampel:

function win (attr, value) {
    if(typeof value === 'undefined'){
        return document.documentElement[attr] || document.body[attr];
    }
    
    document.documentElement[attr] =value; document.body[attr] = value;
}