event.clientX
相对文档的水平座标
event.clientY
相对文档的垂直座标
offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
#clientHeight+滚动条+边框
offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.offsetX
相对容器的水平坐标
event.offsetY
相对容器的垂直坐标
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } p { width: 111.111111%; font-size: 30px; } #box1 { float: left; width: 500px; height: 500px; overflow: auto; } #box2 { float: left; width: 500px; height: 500px; overflow: auto; padding: 7px; border: 7px solid #000; } </style> </head> <body> <div id="box1"> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> </div> <div id="box2"> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> <p>如果丘处机没有路过牛家村，中国将是最发达国家如果丘处机没有路过牛家村，中国将是最发达国家</p> </div> <script> var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); alert('clientWidth:' + box1.clientWidth + ' clientHeight:' + box1.clientHeight + ' scrollWidth:' + box1.scrollWidth + ' scrollHeight:' + box1.scrollHeight + ' offsetWidth:' + box1.offsetWidth + ' offsetHeight:' + box1.offsetHeight); alert('clientWidth:' + box2.clientWidth + ' clientHeight:' + box2.clientHeight + ' scrollWidth:' + box2.scrollWidth + ' scrollHeight:' + box2.scrollHeight + ' offsetWidth:' + box2.offsetWidth + ' offsetHeight:' + box2.offsetHeight); </script> </body> </html>
再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
http://www.cftea.com/c/2010/10/ZROIXWE5YCZ6WQDJ.asp
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 { width: 1900px; height: 1900px; } #box2 { width: 100px; height: 100px; } </style> </head> <body> <div id="box3"></div> <div id="box2"></div> <div id="box1"></div> <script> document.getElementById('box3').innerHTML = 'document.documentElement.scrollWidth:' + document.documentElement.scrollWidth + '<br> document.body.scrollWidth:' + document.body.scrollWidth + '<br> document.documentElement.scrollHeight:' + document.documentElement.scrollHeight + '<br> document.body.scrollHeight:' + document.body.scrollHeight + '<br><br> document.documentElement.offsetWidth:' + document.documentElement.offsetWidth + '<br> document.body.offsetWidth:' + document.body.offsetWidth + '<br> document.documentElement.offsetHeight:' + document.documentElement.offsetHeight + '<br> document.body.offsetHeight:' + document.body.offsetHeight + '<br><br> document.documentElement.clientWidth:' + document.documentElement.clientWidth + '<br> document.body.clientWidth:' + document.body.clientWidth + '<br> document.documentElement.clientHeight:' + document.documentElement.clientHeight + '<br> document.body.clientHeight:' + document.body.clientHeight; </script> </body> </html>