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我實習的公司已經放棄啦。
window.innerWidth與document. documentElement.clientWidth用哪個？
接下來說的是不為網頁加上meta標籤的效果，加上標籤的我覺得應該另外寫一篇，因為會涉及到自適應的知識。
我做了再安卓機瀏覽器，iPhone的safari瀏覽器以及這兩款手機內微信內訪問網頁運行的qq瀏覽器的測試。
測試結果肯定是不統一的。
測試前提：不為頁面設定固定的寬度，不設定meta標籤。
測試結果：
| 屬性 | #安卓機 | iphone |
|---|---|---|
| #window.innerWidth | #980px | 980px |
| #980px | 980px |
| 安卓機微信 | #4微信 | |
|---|---|---|
| 320px | 980px||
| 980px | #980px |
以上是JS中得取得寬度的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
