尺寸获取大全
2012-08-01 17:27 江苏黑马 阅读(732) 评论(0) 收藏 举报- event(ie:window.event;ff:function(e){};兼容方法:function(e){e=e?e:window.event;})
(1)当事件被触发时,鼠标指针相对于窗口文档显示区坐标
event.clientX、event.clientY
(2)当事件被触发时,鼠标指针相对于屏幕坐标
event.screenX、event.screenY
- window
(1)窗口文档显示区宽高(包括滚动条)
window.innerWidth、window.innerHeight
document.documentElement.clientWidth、document.documentElement.clientHeight
document.body.clientWidth、document.body.clientHeight(不包括滚动条)
(2)整个窗口的高度
window.outerWidth、window.outerHeight
(3)窗口左上角相对于屏幕坐标
在Firefox等浏览器中使用的是screenX、screenY属性
window.screenTop、window.screenLeft,window.screenX、window.screenY
(4)屏幕分辨率宽高
window.screen.width、window.screen.height
(5)屏幕工作区宽高
window.screen.availWidth、window.screen.availHeight
(6)网页被卷去的宽高
window.pageXOffset、window.pageYOffset
document.documentElement.scrollLeft、document.documentElement.scrollTop
document.body.scrollLeft、document.body.scrollTop
- element
(1)
(2) - clientTop和clientLeft
返回对象的offsetLeft属性值和到当前窗口左边和上边的真实值之间的距离。MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在 document.body.clientLeft 和 clientTop 中
document.documentElement.clientTop/document.documentElement.clientLeft
- offsetTop和offsetLeft
网上看到:
对于offsetTop和offsetLeft的值,IE和FF的解释是不一样的 IE浏览器:是此节点相对于父节点的位移 FF浏览器:是此节点相对于body的位移
我实验后发现,不管是IE还是FF都是相对于body位移。
代码如下:<!DOCTYPE html> <html> <head> <title></title> <style> #wrap { margin: 100px auto; width: 100px; height: 100px; background-color: #ddd } #content { margin: 0 auto; width: 20px; height: 20px; background-color: #f00 } </style> </head> <body> <div id="wrap"> <div id="content"></div> </div> <script> var $ = document.getElementById('content'); var value = $.offsetTop; if ( typeof console.log == 'function') { console.log(value); } else { alert(value); } </script> </body> </html>
代码如下:
<!DOCTYPE html> <html> <head> <title></title> <style> #container { width: 500px; background-color: #808080; position: relative } #main { width: 10px; height: 10px; background-color: #ff0 } #wrap { margin: 100px auto; width: 100px; height: 100px; background-color: #ddd; position: relative; margin: 20px } #content { margin: 0 auto; width: 20px; height: 20px; background-color: #f00 } </style> </head> <body> <div id="container"> <div id="main"> </div> <div id="wrap"> <div id="content"></div> </div> </div> <script> var $ = document.getElementById('content'); var value = $.offsetTop; if ( typeof console.log == 'function') { console.log(value); } else { alert(value); } </script> </body> </html>
- offsetWidth、offsetHeight与width和height的区别
1)宽高都写在样式表里或者没有设置宽度和高度,前者才能获取宽度和高度;
2)宽和高是写在行内中,比如style="width:120px;height:120px",这中情况通过上述2个方法都能拿到宽高;
3)width是字符串 ,offsetWidth是数字 。如width= "300px "; offsetWidth =300。
注意:如果不是写在行内style中的属性都不能通过id.style.atrr来获取。 - document.documentElement.offsetHeight。
除ie6浏览器,表示根节点实际高度。 - offsetParent属性作用
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素,根元素的offsetParent属性 返回 null。
综上3条我们可以总结出获取一个元素坐标系的代码片段:
//获取元素坐标 function getEleCoordinate(ele) { var t = ele.offsetTop; var l = ele.offsetLeft; var w = ele.offsetWidth; var h = ele.offsetHeight; while ( ele= ele.offsetParent) { t += ele.offsetTop; l += ele.offsetLeft; }; return { top : t, left : l, width : w, height : h, bottom : t + h, right : l + w } }
- document.documentElement.offsetWidth、document.documentElement.offsetHeight(ie6-8)包括边线在内可视区域宽高。