1.clientwidth和clientheight
指元素的可視部分寬度和高度，就是padding+content
如果沒有滾動條，就是設定的寬度和高度
如果有滾動條，就是設定的寬度和高度減去滾動條的寬度和高度
body
document.body.clientwidth //500+80=580
document.body.clientheight//350+80=430
#mydiv
//在div中新增文字，出現滾動條
var mydiv=document.getelementbyid('mydiv');
mydiv.clientheight//200
mydiv.clientwidth//200-7
小結：
無padding無滾動:clientwidth=style.width
有padding無滾動:clientwidth=style.width+padding*2
有padding有滾動:clientwidth=style.width+padding*2-滾動軸寬度
clientleft和clienttop
這一對屬性是讀取元素border的寬度和高度
clienttop=border-top的border-width
clientleft=border-left的border-width
2.offsetwidth offsetheight
就是padding+content+border
body
document.body.offsetwidth //500+80+40=620
document.body.offsetheight//350+80+40=470
小結：
無padding無滾動無border
offsetwidth=clientwidth=style.width
有padding無滾動有border
offsetwidth=style.width+style.padding*2+(border-width)*2
offsetwidth=clientwidth+(border-width)*2
有padding有滾動有border
offsetwidth=style.width+style.padding*2+(border-width)*2+滾動條寬度
獲取各種盒子的各種寬高和距離
document ready function 獲取瀏覽器顯示區域 可視區域 的高度 window height 獲取瀏覽器顯示區域 可視區域 的寬度 window width 獲取頁面的文件高度 document height 獲取頁面的文件寬度 document width 瀏覽器當前視窗文件b...
jQuery獲取各種高和寬
alert window height 瀏覽器時下視窗可視區域高度 02alert document height 瀏覽器時下視窗文件的高度 03alert document.body height 瀏覽器時下視窗文件body的高度 04alert document.body outerheight...
元素大小 各種寬高長度
offsetheight offsetwidth offsettop offsetleft clientheight clientwidth 確定瀏覽器的視口大小 可以使用document.documentelement.clientwidth或document.body.clientwidth i...