offsetWidth: 元素在水平方向上占用的空间大小。包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度。
offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度.
offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离
offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离
offsetParent: 保存着包含元素的引用
注意:
1.当对象的offsetParent属性指向的是body时,offsetLeft和offsetTop指的是对象的边框(不包括边框)到页面边缘(即包含body的border的宽度,或高度)的距离。在FireFox中,会减去body的边框的宽度。
2.当对象的offsetParent属性指向的是最近的定位祖先元素时,offsetLeft和offsetTop指的是对象的边框(不包括边框)到最近的定位祖先元素的边框(不包括边框)的距离。在IE8中,会将最近的定位祖先元素的边框宽度和高度计算在内。
注意事项可由以下实例验证得:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>测试offsetLeft, offsetTop</title> <style> * { margin:0; padding:0; } body { margin-left:30px; border:5px solid #000; background:yellow; height:350px; } .d { float:left; position:relative; margin:20px; padding:20px; width:200px; height:200px; border:20px solid #000; background:red; overflow:auto; } .con { float:left; width:400px; height:80px; margin-left:25px; border:10px solid blue; background:green; } .zi { float:left; margin-top:20px; width:200px; height:300px; } </style> <script> (function(){ window.onload=function(){ var d=document.getElementById("d"); var con=document.getElementById("con"); var bo=document.getElementById("bo"); var zi=document.getElementById('zi'); zi.innerHTML="d.offsetTop="+d.offsetTop+"<br/>"+ "d.offsetLeft="+d.offsetLeft+"<br/>"+ "con.offsetTop="+con.offsetTop+"<br/>"+ "con.offsetLeft="+con.offsetLeft+"<br/>"; } })(); </script> </head> <body id="bo"> <div class="d" id="d"> <div class="con" id="con"> <a href="http://cyg7561.blog.163.com/" title="">test</a> </div> </div> <div class="zi" id="zi"> </div> </body> </html>
clientWidth: 元素内容区宽度+左右内边距宽度( width + padding-left + padding-right )
clientHeight: 元素内容区高度+上下内边距高度(height + padding-top + padding-bottom)
注意:在window环境下IE中滚动条的宽度,高度为17px,FF ,chrome是21px, 在mac mini环境下,chrome, ff中滚动条的宽度都为15px;
scrollHeight: 主要用于确定元素内容的实际大小,在没有滚动条的情况下,元素内容的总高度
scrollWidth: 主要用于确定元素内容的实际大小,表示在没有滚动条的情况下,元素内容的总宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>鬼眼邪神的博客</title> <meta name="author" content="鬼眼邪神"/> <meta name="description" content="鬼眼邪神的博客,http://cyg7561.blog.163.com/"/> <style> * { margin:0; padding:0; } body { margin-left:30px; border:5px solid #000; background:yellow; height:350px; } .d { float:left; position:relative; margin:20px; padding:20px; width:200px; height:200px; border:20px solid #000; background:red; overflow:auto; } .con { float:left; width:400px; height:80px; margin-left:25px; border:1px solid blue; background:green; } .zi { float:left; margin-top:20px; width:200px; height:300px; } </style> <script> (function(){ window.onload=function(){ // var d=document.getElementById("d"); // var con=document.getElementById("con"); // var bo=document.getElementById("bo"); var zi=document.getElementById('zi'); zi.innerHTML= "d.clientWidth="+document.documentElement.clientWidth+"<br/>"+ "d.clientHeight="+document.documentElement.clientHeight+"<br/>"+ "d.scrollWidth="+document.documentElement.scrollWidth+"<br/>"+ "d.scrollHeight="+document.documentElement.scrollHeight+"<br/>"; ; } })(); </script> </head> <body id="bo"> <div class="d" id="d"> <div class="con" id="con"> <a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a> </div> </div> <div class="zi" id="zi"> </div> <p style="border: 2px solid #ddd; width: 100px">测试</p> </body> </html>
以上代码是我用来测试当不包含滚动条的页面中取得页面clientHeight,clientWidth,scrollWidth, scrollHeight时,在各个浏览器中值得差异,根据测试所得,
在IE8,9,11,FF上clientWidth,clientHeight和scrollWidth,scrollHeight是相同的,大小都是代表文档内容区域的大小,而非适口的尺寸
但是在chrome中 scrollWidth,scrollHeight是等于视口大小,clientWidth,clientHeight等于文档内容区域的大小
而这一结论是和《高级程序设计》P324上的结论是相悖的,所以还是值得以后继续探究...
所以在跨浏览器的环境下面得到文档内容区域的大小,是必须要取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值,即:
var docHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight); var docWidht = Math.max( document.documentElement.scrollWidth, document.documentElement.clientWidth);
scrollTop: 被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素的滚动位置
scrollLeft: 被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置
getBoundingClientRect(): 返回包含4个属性:left, top, right, bottom的矩形对象。这些属性表示元素在页面中相对于视口的位置
/* * 跨浏览器兼容getBoundingClientRect()方法 * ie8人为文档的左上角坐标是(2,2),其他浏览器包括IE9则将传统的(0,0)作为起点坐标 * 因此需要一开始检测下位于(0,0)出得元素位置 * 此方法用到arguments.callee,所以这个方法不能在严格模式下使用 */ function getBoundingClientRect( elem ){ // 这个函数使用自身它自身的属性来确定是否要的坐标进行调整 if( typeof arguments.callee.offset != "number" ){ var scrollTop = document.documentElement.scrollTop; var temp = document.createElement("div"); temp.style.cssText = "position: absolute; left: 0; top: 0"; document.body.append( temp ); // 之所以要减去视口的scrollTop,是为了防止调用这个函数时窗口被滚动 arguments.callee.offset = -temp.getBoundingClientRect().top -scrollTop; document.body.removeChild( temp ); temp = null; } var rect = element.getBoundingClientRect(); var offset = arguments.callee.offset; return{ left: rect.left + offset, right: rect.right + offset, top: rect.top + offset, bottom: rect.bottom + offset } }
这个方法兼容IE, Firefox 3+, Safari 4+, Opera 9.5及Chrome;
Event对象定位相关的属性:
event.clientX: 表示事件发生时鼠标指针在视口中的水平坐标,这个值不包括页面滚动的距离
event.clientY: 表示时间发生时鼠标指针在视口中的垂直坐标,这个值不包括页面滚动的距离
所有浏览器都支持这两个属性。
event.pageX: 表示鼠标光标在页面中的位置,因此坐标是从页面本身而非视口的左边计算的
event.pageY: 表示鼠标光标在页面中的位置,因此坐标是从页面本身而非视口的顶端计算的
IE8及更早版本不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来。
var div = document.getElementById("mydiv"); addHandler( div, "click", function( event ){ event = event || window.event; var pageX = event.pageX; var pageY = event.pageY; if( pageX === undefined ){ // document.body(混杂模式)||document.documentElement(标准模式) pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); }; if( pageY === undefined ){ // document.body(混杂模式)||document.documentElement(标准模式) pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); }; });
event.screenX: 表示鼠标事件发生时,鼠标指针相对于整个电脑屏幕的横坐标的信息
event.screenY: 表示鼠标事件发生时,鼠标指针相对于整个电脑屏幕的横坐标的信息