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:显示的都是浏览器可视范围的宽和高,包括浏览器的头部和滚动条部分