1. style.width 適合行內(nèi)樣式

style.?? : 這種方式不適合取值，適合給元素設置樣式

<div style="width:100px;"></div>

2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法（現(xiàn)代瀏覽器）

3. elem.clientWidth 可視寬度 padding+元素寬度，對于行內(nèi)元素，元素的寬度獲取不了，此屬性也不起作用

? ? 獲取網(wǎng)頁的高度：document.documentElement.clientHeight

????????????????????????? ?注意： document.documentElement是html，文檔元素

獲取文檔的寬高：
var w=document.documentElement.clientWidth;? document.body.clientWidth這種寫法是不對的
var h=document.documentElement.clientHeight;

????????css中 用：root表示html選擇器，假如body設置了背景色紅色，html不設置，那么此紅色會填充整個網(wǎng)頁，如果再給:root設置了藍色的背景色，那么藍色填充整個網(wǎng)頁，紅色只填充到有網(wǎng)頁元素的部分

? ? ?

4. elem.offsetWidth 占位寬，可視寬度+border

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

Typically, an element's offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and?the element's horizontal scrollbar (if present, if rendered). It does not include the height of pseudo-elements such as :before or :after.

對于行內(nèi)元素可以用此屬性，但是獲取的值在各瀏覽器中不一致，解決辦法是，首先把行內(nèi)元素轉化為塊元素，然后設置其寬高，再用clientWidth和offsetWidth

<span id="span1">spanspanspanspanspanspanspanspan</span>

#span1{
    display: block;
    width: 300px;
}

另外，如果元素設置了box-sizing，還必須考慮box-sizing的值

① 如果設置了box-sizing: content-box；

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么樣式中的width100px就是內(nèi)容寬，此時clientWidth=100+10+10，offsetWidth=100+10+10+10+10

② 如果設置了box-sizing: border-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么樣式中的width100px就是包含了border的寬度，所以100px=border+padding+內(nèi)容寬，計算內(nèi)容寬=60

這時clientWidth=60+10+10，offsetWidth=60+10+10+10+10