獲取隱藏元素的尺寸
阿新 • • 發佈：2019-02-05
平時要獲取一個元素的尺寸一般都會直接使用offsetWidth和offsetHeight來獲取，但是這兩個屬性是通過CSS渲染到頁面上時候才計算的。而dispaly屬性為none的元素將不參與渲染，它不會在渲染環境中生成任何盒子，自然也無法從屬性中獲取到尺寸。
offsetWidth和offsetHeight的值就是CSS在layout時的值，不參與渲染就自然不會layout，所以當然無法從這裡獲取到值。如果元素是固定尺寸的，那甚至都不用刻意獲取，因為開發者知道元素的大小。所以這裡討論的是尺寸不固定，也無法通過內容來計算的情況。
這種蛋疼的情況怎麼辦？對於蛋疼的情況，咱就只能使用蛋疼的方法了。dispaly屬性為none的元素要直接獲取尺寸是行不通了，我們必須修改這個display，或者說臨時修改這個display來讓元素參與渲染以便計算尺寸。但是修改display就會產生其它問題，通常為了防止 元素參與到常規流動中，會直接使用position屬性的absolute值來讓元素呆在流外。並使用top和left的負值讓它移動到偏僻的看不見的地方。這樣再獲取元素的尺寸。
無論何種方法，遇到特殊情況都總會有問題。所以上面這些是一般的方式，具體的實現得從實際角度考慮。
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;
}; 這隻適合獲取寬度，對於高度而言並麼有自適應的問題，如果是百分比的高度完全不需要獲取，只要取容器的高度來計算就行了。自動的高度是內容的最小高度，如果非要算，可以結合上面的兩個方法，先獲取寬度，再固定寬度絕對定位來計算高度。無論何種方法，遇到特殊情況都總會有問題。所以上面這些是一般的方式，具體的實現得從實際角度考慮。