Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

获取隐藏元素的尺寸

  平时要获取一个元素的尺寸一般都会直接使用offsetWidth和offsetHeight来获取,但是这两个属性是通过CSS渲染到页面上时候才计算的。而dispaly属性为none的元素将不参与渲染,它不会在渲染环境中生成任何盒子,自然也无法从属性中获取到尺寸。
  offsetWidth和offsetHeight的值就是CSS在layout时的值,不参与渲染就自然不会layout,所以当然无法从这里获取到值。如果元素是固定尺寸的,那甚至都不用刻意获取,因为开发者知道元素的大小。所以这里讨论的是尺寸不固定,也无法通过内容来计算的情况。
  这种蛋疼的情况怎么办?对于蛋疼的情况,咱就只能使用蛋疼的方法了。dispaly属性为none的元素要直接获取尺寸是行不通了,我们必须修改这个display,或者说临时修改这个display来让元素参与渲染以便计算尺寸。但是修改display就会产生其它问题,通常为了防止 元素参与到常规流动中,会直接使用position属性的absolute值来让元素呆在流外。并使用top和left的负值让它移动到偏僻的看不见的地方。这样再获取元素的尺寸。
<style>
#div {display:none;}
</style>
<div id="div">
  <a href="http://www.web-tinker.com">Web技术研究所</a>
</div>
<script>
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;
};
</script>
  这个方法太暴力了!虽然这对于一般的情况而言并没有什么问题,它也是最方便的方法。但它强制性的把一个元素丢到了流外,这会导致一些继承性的东西失效。考虑元素是自适应容器宽度的情况,这样不分青红皂白的就把元素丢到流外显然会得到错误的结果。比如把上面例子的HTML改成这样,输出的结果还是一样的,但事实上真正渲染出来的结果不会那样的。 <style>
.panel {width:500px;}
#div {display:none;margin:20px;}
</style>
<div class="panel">
  <div id="div">
    <a href="http://www.web-tinker.com">Web技术研究所</a>
  </div>
</div>
   这时候,我们可以从上面的方法中变通一下。既然不能把元素直接丢到流外。那就让它保持在流内,并想办法隐藏它,使它不影响其它布局。比如下面这种做法就是把元素弄成0高度的来隐藏。 onload=function(){
  //由于此时元素的display为none,因此无法获取尺寸,固输出0
  console.log(div.offsetWidth);
  //保存原来的属性值
  var display=div.style.display,
      overflow=div.style.overflow,
      height=div.style.height;
  //设置新属性
  div.style.display="block";
  div.style.overflow="hidden";
  div.style.height="0px";
  //由于元素已经参与渲染,所以可以获取到尺寸
  console.log(div.offsetWidth);
  //还原被修改的属性
  div.style.display=display;
  div.style.overflow=overflow;
  div.style.height=height;
};
  这只适合获取宽度,对于高度而言并么有自适应的问题,如果是百分比的高度完全不需要获取,只要取容器的高度来计算就行了。自动的高度是内容的最小高度,如果非要算,可以结合上面的两个方法,先获取宽度,再固定宽度绝对定位来计算高度。
  无论何种方法,遇到特殊情况都总会有问题。所以上面这些是一般的方式,具体的实现得从实际角度考虑。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^