获取隐藏元素的尺寸

平时要获取一个元素的尺寸一般都会直接使用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;
}; 　　这只适合获取宽度，对于高度而言并么有自适应的问题，如果是百分比的高度完全不需要获取，只要取容器的高度来计算就行了。自动的高度是内容的最小高度，如果非要算，可以结合上面的两个方法，先获取宽度，再固定宽度绝对定位来计算高度。
　　无论何种方法，遇到特殊情况都总会有问题。所以上面这些是一般的方式，具体的实现得从实际角度考虑。