获取隐藏元素的尺寸

Web技术研究所

οnlοad=function(){
//由于此时元素的display为none，因此无法获取尺寸，固输出0
console.log(div.offsetWidth,div.offsetHeight);
//保存原来的属性值
var display=div.style.display,
position=div.style.position,
left=div.style.left;
//设置新属性
div.style.display="block";
div.style.position="absolute";
div.style.left="-10000px";
//由于元素已经参与渲染，所以可以获取到尺寸
console.log(div.offsetWidth,div.offsetHeight);
//还原被修改的属性
div.style.display=display;
div.style.position=position;
div.style.left=left;
};
　　这个方法太暴力了！虽然这对于一般的情况而言并没有什么问题，它也是最方便的方法。但它强制性的把一个元素丢到了流外，这会导致一些继承性的东西失效。考虑元素是自适应容器宽度的情况，这样不分青红皂白的就把元素丢到流外显然会得到错误的结果。比如把上面例子的HTML改成这样，输出的结果还是一样的，但事实上真正渲染出来的结果不会那样的。

div {display:none;margin:20px;}

Web技术研究所