clientTop、clientLeft:
clientTop:盒子的上boder
clientLeft:盒子的左border
clientWidth與clientHeight
1、在有DTD情況下:
document.body.clientWidth、document.body.clientHeight:顯示的是body的寬和高,document.documentElement.clientWidth、document.documentElement.clientHeight:顯示的是body可視范圍的寬和高,
2、在無DTD情況下:
document.body.clientWidth、document.body.clientHeight顯示的是body可視范圍的寬和高;
document.documentElement.clientWidth、document.documentElement.clientHeight顯示的是body的高和body可視范圍的寬(IE中顯示的都是body可視范圍的寬和高)
3、不管有沒有DTD:
window.innerWidth、window.innerHeight:顯示的都是瀏覽器可視范圍的寬和高,包括瀏覽器的頭部和滾動條部分(IE678無法識別window.innerWidth)
調用者的區別:
1、clientTop、clientLeft、clientWidth、clientHeight調用者是元素
2、clientX、clientY調用者是event對象
client、scroll、offset區別:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內容寬度(不包含border)
scrollHeight = 內容高度(不包含border)
注意事項:IE67,scrollHeight即使不超出盒子,它的值也是內容的高度
兼容寫法:
<script> document.title = client().width + " " + client().height; //新事件:瀏覽器大小變化事件(瀏覽器哪怕大小變化1px也會觸動這個事件) window.onresize = function () { document.title = client().width + " " + client().height; } //獲取屏幕可視區域的寬高 function client() { if (window.innerHeight !== undefined) { return { "width": window.innerWidth, "height": window.innerHeight } } else if (document.compatMode === "CSS1Compat") { return { "width": document.documentElement.clientWidth, "height": document.documentElement.clientHeight } } else { return { "width": document.body.clientWidth, "height": document.body.clientHeight } } } </script>
注意事項:window.innerWidth、window.innerHeight:顯示的都是瀏覽器可視范圍的寬和高,包括瀏覽器的頭部和滾動條部分