获取窗口属性
- 查看滚动条的滚动距离
- window.pageXOffset/pageYOffset
- IE8及IE8以下不兼容
- document.body/documentElement.scrollLeft/scrollTop
- 兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值
- 封装兼容性方法,求滚动轮滚动离getScrollOffset()
- window.pageXOffset/pageYOffset
为了解决兼容性的问题,我们来封装一个函数:
<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>
- 查看视口的尺寸
- window.innerWidth/innerHeight
- IE及IE8以下不兼容
- document.documentElement.clientWidth/clientHeight
- 标准模式下,任意浏览器都兼容
- document.body.clientWidth/clientHeight
- 适用于怪异模式(向后兼容)下的浏览器
- 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
- window.innerWidth/innerHeight
为了解决兼容性的问题,我们来封装一个函数:
<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>
文本内容
<div 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</div>
<div 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</div>
</body>
<script type="text/javascript">
var start = document.getElement.getElementsByTagName('div')[0];
var stop = document.getElement.getElementsByTagName('div')[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