设置width / height 引发的问题

设置一个元素的高宽,有两种方式:

1. 按可视区域计算,包括border 和 滚动条

2. 按css特指的 width/height 计算

 

这两种方式各有各的好处:

第一种用起来很自然,调用者不用去管元素内部的结构,特别是公用性特别明显的组件,如果每次调用都要先减去什么或加上什么,会平添很多代码;

第二种则是需要团队定好规则,某个组件只能这么设置高宽(我偏好第一种,第二种也想不到别的好处了。。。)

 

下面只说第一种(第二种还需要说么。。。)。

DOM元素的可视区域由 border, padding, content 组成。也就是说如果我们设置一个元素宽度为200px,其实际content = 200 - border - padding

这里介绍两个属性

offsetWidth/offsetHeight: 元素的可视区域高宽,包括 border 和 滚动条

clientWidth/clientHeight: 不知道用哪个词表示,就是 padding + content

 

因此 setWidth() 可以像下面这样实现:

function setWidth(elem, width) {
    elem.style.width = (width - (elem.offsetWidth - elem.clientWidth)) + 'px';
}

 

大部分情况下,这么写确实没问题,但是碰到有垂直滚动条,悲剧就来了。

 

elem.style.width = content + 滚动条的宽度

 

有滚动条的时候,还有一对属性比较有用:scrollWidth/scrollHeight

他俩可以看成是 clientWidth/clientHeight 的增强版,即包括 padding + content。千万别理解成了 offsetWidth/offsetHeight 的增强版,不然会很坑爹的

posted @ 2012-10-09 17:21  越己  阅读(263)  评论(0编辑  收藏