DOM之度量

一个网页就是一个图纸,前端工程师的任务就是把图纸中所有元素的尺寸和大小规划好,然后把它们安放在图纸相应的位置。有时候我们需要度量元素的位置和坐标,那么我们来复习一下和度量有关的那些事儿吧~翻译原文的链接here


css盒模型


一个文档例子

<div id="example">

## Introduction   

  The contents. 
</div>

这个文档盒子绝对定位,有borders、paddings、margins、和滚动条:

#example {
  position: absolute;

  width: 300px;
  height: 200px;

  left: 160px;
  top: 160px;

  padding: 20px;
  margin: 20px;

  overflow: auto;
  border: 25px solid #F0E68C;
}

然后我们看看css样式对这个盒子起的作用,看上面的数字标注,很清晰吧。


盒子的度量

css中的width和height:指的是内容区域的大小,即padding之内的区域。css的属性可以用element.style来设置,并用getComputedStyle()/currentStyle来读取。

那么在js的世界里是如何得到各种width和height呢?所有的js度量都是以px为单位的,但是省略了px这个符号

clientWidth/clientHeight: 带padding不带滚动条的的内容区域

计算如下:

clientWidth = 300(width) + 40(paddings) - 16(scrollbar) = 324  
clientHeight = 200(height) + 40(paddings) = 240  

如果没有padding,clientWidth/clientHeight展示的就是实际的内容区域大小了:

从上图可以看出,css的width包括了滚动条,你不能插入一个300px的元素到这个盒子里,真正可用的区域宽度是clientWidth.

scrollWidth/scrollHeight:

scrollWidth/scrollHeight和clientWidth/clientHeight一样,但是包含了整个可以滚动的区域。例如可以用下面的代码使得垂直方向上展示出所有内容:

element.style.height = element.scrollHeight + 'px';  

scrollTop/scrollLeft:溢出部分的距离

scrollLeft/scrollTop是可写的。

offsetWidth/offsetHeight: 包含border不包含margin的长度。

clientTop/clientLeft: top/left的border的长度。

offsetParent/offsetLeft/offsetTop: offsetLeft和offsetTop反映了元素相对于它的offsetParent的偏移量。offsetParent是在布局上的父元素,例如:如果一个元素是绝对定位,那么offsetParent不是它的DOM上的父元素,而是离它最近的被定位过的元素(postion为非static的元素,如果没有则是body或者table cell)。

注意:js中的坐标系统和大小值都只会设置给可见的元素。如果元素是display:none的话,所有值为0,并且它的offsetParent为null。

我们可以利用这一特性来判断一个元素是否可见:

function isHidden(elem)  
  return !elem.offsetWidth && !elem.offsetHeight
}
//即使父元素为display:none也适用
//有些浏览器不能识别TR
//不能适用:visibility:hidden的或者被定为移出了可视区域的情况

突然想起一道面试题,怎么判断一个元素是否可见?咿呀。。。。不是简单的一种情况呀,有兴趣的可以想想哦~

附上整体一个图:

貌似这张图更清晰,再附上:

如果我的文章对您有帮助
欢迎打赏(。・ω・)

Zhang Xiao

Read more posts by this author.

beijing