JavaScript中的盒子模型

文章共499个字 读完大约需要1分钟

javascipt盒子模型

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

client系列

  • clientWidth: 内容宽度+左右padding.
  • clientHeight: 内容高度+上下padding.
  • clientLeft: 获取元素 左边框宽度.
  • clientTop: 获取元素 上边框宽度 其实就是border【left/top】Width的值.

offset系列

  • offsetWidth: clientWidth+左右边框宽度.
  • offsetHeight: clientHeight+上下边框宽度 和内容是否溢出没有关系.
  • offsetTop: 元素上边框外边距离父级参照物上偏移量.
  • offsetleft: 元素左边框外边距离父级参照物左偏移量.
  • offsetParent: 元素父级参照物,可以修改.

scroll系

在没有溢出的情况下

  • scrollWidth: clientWidth
  • scrollHeight: clientHeight

溢出情况下

  • scrollWidth: 真实内容宽度(包含溢出)+左填充
  • scrollHeight: 真实内容高度(包含溢出)+上填充

PS:获取到的结果都是约等于值,因为:同一个浏览器是否设置overflow=’hidden’对最终结果是有影响的;在不同浏览器中,我们获取到的结果也是不相同的.

  • scrollLeft: 滚动条卷去的宽度.
  • scrollTop: 滚动条卷去的高度.

关于js盒子模型属性取值的问题

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

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

  1. clientWidth/clientHidth是当前浏览器可视窗口的宽度和高度.
  2. scrollWidth/scrollHeight是当前页面的真实宽度和高度(是个约等于值)。
  3. 我们不管那些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容,需要写两套
1
2
3
4
5
6
7
function win(attr,val) {
if(typeof val === 'undefined'){
// 如果第二个参数没传就是获取值
return document.documentElement[attr] || document.body[attr];
}
// 否则就是 设置值
document.documentElement[attr] = val; document.body[attr] = val; }

推荐文章

-->