获取隐藏元素的尺寸

平时要获取一个元素的尺寸一般都会直接使用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;

};

　　这只适合获取宽度，对于高度而言并么有自适应的问题，如果是百分比的高度完全不需要获取，只要取容器的高度来计算就行了。自动的高度是内容的最小高度，如果非要算，可以结合上面的两个方法，先获取宽度，再固定宽度绝对定位来计算高度。

　　无论何种方法，遇到特殊情况都总会有问题。所以上面这些是一般的方式，具体的实现得从实际角度考虑。