获取窗口属性,获取DOM元素尺寸
查看滚动条的滚动距离
window.pageXOffset //x轴
window.pageYOffset // y轴
查看可视窗口的尺寸
window.innerWidth/innerHeight
标准模式,怪异模式
就是文档第一行<!DOCtype html>,去掉的话就是怪异模式了
怎么分辨文档是什么模式?
document.compatMode结果是CSS1Compat是标准,如果是BackCompat是怪异
查看元素的尺寸
dom.offestWidth
dom.offsetHeight
查看元素的位置
dom.offsetLeft
dom.offsettop
对于无定位父级的元素,返回相对文档的坐标。对于有父级定位的元素,返回相对于
最近于最近有定位的父级的坐标。
dom.offsetParent
返回最近的有定位的父级,如无,返回Body, body.offsetParent返回null
让滚动条滚动
window上有三个方法
scroll(),scrollTo()这两个功能一样,用哪个都可以
scrollBy();会在之前的数据基础上进行累加
可以做一个简易小说阅读器
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
</head>
<body>
放入若干文档
<div style= "width: 100px;height: 100px;background-color: orange;
color: palevioletred;font-size: 40px;font-weight: bold;text-align: center
;line-height: 100px;position: fixed;bottom: 200px;right: 50px;border-radius: 50%;opacity: 0.5;">
start</div>
<div style= "width: 100px;height: 100px;background-color:green;
color: palevioletred;font-size: 40px;font-weight: bold;text-align: center
;line-height: 100px;position: fixed;bottom: 50px;right: 50px;border-radius: 50%;opacity: 0.5;">
stop</div>
<script>
var start = document.getElementsByTagName('div')[0];
var stop = document.getElementsByTagName('div')[1];
var timer;
start.onclick = function (){
timer = setInterval(function(){
window.scrollBy(0,10);
},100)
}
stop.onclick = function(){
clearInterval(timer);
}
</script>
</body>
</html>
上一篇: 获取DOM元素尺寸及鼠标位置
下一篇: zookeeper的简介及全分布式部署