设置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 越己阅读(388) 评论(0) 编辑收藏举报

越己