返回 登录
0

获取隐藏元素的尺寸


onload=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;}



















评论