JS中得取得寬度的方法實例

---

window與document的這些屬性的值會不太相容，會在後面補充。
一下效果顯示忽略IE9之前瀏覽器，主要考慮主流瀏覽器與手機端的效果。

• 可以取得寬度與高度的屬性

• clientHeight 與clientWidth 指元素的客戶區大小，即可見內容區+padding

     #t1{
         width: 100px;
         height: 100px;
         border: 4px solid yellowgreen;
         background: yellow;
         padding: 10px;
     }

  
  

  #p.clientWidth+';'+p.clientHeight;

  120= width(100)+padding(10)*2;
  不加邊框，當內容溢出或出現捲軸時的寬度與高度都不會算。
  是dom物件的可見寬度，這裡的可見是針對設定overflow: scroll;後部分內容隱藏而說的。

• offsetHeight與offsetWidth 是元素的外在大小，即border +padding+可見內容區

  
  

  p.offsetWidth+';'+p.offsetHeight

  128 = width(100)+padding(10)2+border(4)2
  上圖內容區溢出隱藏，是因為設定了overflow: scroll;才會有這樣的現象。

• scrolWidth與scrollHeight是元素的實際大小，即實際內容區+padding

  
  

  p.scrollWidth+';'+p.scrollHeight

以上這三對屬性都是針對dom元素的，可以測得元素的寬度，但是，細心的會發現，以上三種並沒有提供獲得width（100）的方法，所以可以使用window.getComputedStyle(p,null).getPropertyValue('width');
這樣取得就是100。

---

其實比較難理解的是像window、document.body、document. documentElement這兩個dom物件在獲得他們的寬度時會有各種問題。
現在開始撕一下這其中的神奇。 。 。

• document.body與document. documentElement
  前者是body，後者是html。但現在大家都習慣將元素預設的padding與margin設定為0，這樣無論是透過以上兩種誰去存取clientWidth都是一樣的值（電腦端一致）。
  但是手機端訪問這兩個值的時候會隨著由於是客戶端，我們會對網頁的meta標籤做一些設置，然後通過這兩個對象訪問的屬性的值就不一樣。但是由於body是html的子標籤，所以獲得可視視窗（clientWidth）的大小，建議使用後者document. documentElement.clientWidth。

  document物件有個屬性compatMode ,它有兩個值：
  BackCompat     對應quirks mode
  CSS1Compat     對應strict mode
  IE6以前的瀏覽器就是第一個渲染模式，導致IE6要是想取得可視視窗（clientWidth）時，必須使用document.body.clientWidth這個來存取。 IE6我實習的公司已經放棄啦。

綜上：拋棄document.body的用法，使用document. documentElement。

• window.innerWidth與document. documentElement.clientWidth用哪個？
  接下來說的是不為網頁加上meta標籤的效果，加上標籤的我覺得應該另外寫一篇，因為會涉及到自適應的知識。
  我做了再安卓機瀏覽器，iPhone的safari瀏覽器以及這兩款手機內微信內訪問網頁運行的qq瀏覽器的測試。
  測試結果肯定是不統一的。
  測試前提：不為頁面設定固定的寬度，不設定meta標籤。
  測試結果：

##~.~.clientWidth #980px980px

屬性	#安卓機	iphone
#window.innerWidth	#980px	980px

#屬性安卓機微信#4微信window.innerWidth980px~.~.clientWidth980px#980px

總是會有搗蛋鬼。 。 。
綜上：如果想要取得手機端頁面的可視寬度，建議使用
document. documentElement.clientWidth

在下一篇，筆記中，會對這個屬性在meta標籤的不同設定下的值進行分析。

BTW：我又回來，好好學習！

【相關推薦】

1. 免費js線上影片教學

2. JavaScript中文參考手冊

3. php.cn獨孤九賤（3）－JavaScript影片教學

#

	320px

以上是JS中得取得寬度的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！