Rumah >hujung hadapan web >tutorial js >JavaScript中获取窗口的属性(视口高度、元素尺寸、元素位置)
查看滚动条的滚动距离
兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值
IE8及IE8以下不兼容
window.pageXOffset/pageYOffset
document.body/documentElement.scrollLeft/scrollTop
封装兼容性方法,求滚动轮滚动离getScrollOffset()
为了解决兼容性的问题,我们来封装一个函数:
<script type="text/javascript"> function getScrollOffset() { if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset } else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop, } } } </script>
查看视口的尺寸
适用于怪异模式(向后兼容)下的浏览器
标准模式下,任意浏览器都兼容
IE及IE8以下不兼容
window.innerWidth/innerHeight
document.documentElement.clientWidth/clientHeight
document.body.clientWidth/clientHeight
封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
为了解决兼容性的问题,我们来封装一个函数:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return { w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode ==="BackCompat") { return { w : document.body.clienWidth, h : document.body.clientHeight } }else{ return { w : document.documentElement.clientWidth, h : document.documrntElement.clientHeight } } } </script>
查看元素的几何尺寸
domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标。
height和width属性老版本IE不显示(人为解决:分别相减一下就能得出)
返回的结果并不是”实时的”
让滚动条滚动
window上有三个方法
scroll(x,y)在x轴、y轴上滚动的位置,scrollTo(x,y)
让滚动条滚动到当前位置,而不是累加距离(这两种方法是完全一样的)
scrollBy();累加滚动距离
三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动条滚动到当前位置。
区别:scrollBy()会在之前的数据基础之上做累加。
eg:利用scroll()页面定位功能。
eg:利用scrollBy()快速阅读功能。
练习:
做一个小阅读器,会自动翻页。
<!DOCTYPE html><html><head> <title>Document</title></head><body>文本内容 <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p> <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript"> var start = document.getElement.getElementsByTagName('p')[0]; var stop = document.getElement.getElementsByTagName('p')[1]; var timer = 0; var key = true; //加锁,防止连续点start产生累加加速 start.onclick = function() { if(key) { timer = setInterval(function() { window.scollBy(0,10); },100); key = false; } } stop.onclick = function() { clearInterval(timer); key = true; }</script>
查看元素的尺寸(视觉上的)
dom.offsetWidth,dom.offsetHeight
查看元素的位置
dom.offsetLeft,dom.offsetTop
对于无定位父级的元素,返回相对文档的坐标。对于有定位的父级元素,返回相对于最近的有定位的父级的坐标。
dom.offsetParent
返回最近的有定位的父级,如无,返回body,body.offsetParent返回null
eg:求元素相对于文档的坐标getElementPosition
相关文章:
相关视频:
Atas ialah kandungan terperinci JavaScript中获取窗口的属性(视口高度、元素尺寸、元素位置). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!