設定display:none無法獲取元素的尺寸

admin發表於2017-03-31
None

本章節介紹一下標題中設計的相關內容，希望能夠給需要的朋友帶來一定的幫助。

其實關於這個主題的文章在網路上已經很多，之所以再來重複一下，是因為很多文章並沒有說清楚無法獲取什麼樣的尺寸。

先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  height:100px;
  background:#CCC;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var odiv=document.getElementById("show");
  odiv.innerHTML=obox.style.width;
}
</script>
</head>
<body>
<div id="box" style="width:200px;">softwhy.com</div>
<div id="show"></div>
</body>
</html>

上面的程式碼中，雖然div設定為隱藏，但是依然可以獲取它的寬度，可能很多人看到這裡疑惑了，不是說好了設定隱藏的元素無法獲取它的尺寸的嗎。下面再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  height:100px;
  background:#CCC;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var odiv=document.getElementById("show");
  odiv.innerHTML=obox.offsetWidth;
}
</script>
</head>
<body>
<div id="box" style="width:200px;">螞蟻部落</div>
<div id="show"></div>
</body>
</html>

上面的程式碼的結果確實是顯示0，這就奇怪了為什麼這裡無法獲取尺寸呢，下面就做一下分析。像offsetWidth、offsetHeight、clientWidth或者clientHeight這樣的屬性獲取的是瀏覽器解析後的元素尺寸值，元素隱藏了，自然沒有解析，所以獲得的值是0，而第一種方式並不是獲取的元素尺寸值，而是獲取的對元素的css樣式設定中的寬高值，這個和解析後的尺寸是兩個概念。

相關文章