查看滚动条的距离
window.pageXOffset/pageYOffset
ie8及ie8以下不兼容
document.body/document.Element.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值
封装兼容性方法，求滚动轮滚动离getScrollOffset()function getScrollOffset(){ if(window.pageXOffset){ return{ x: window.pageXOffset, y: window.pageYOffset }else{ return{ x:document.body.scrollLeft + document.document.Element.scrollLeft y:document.body.scrollTop + document.document.Element.scrollTop } } }
查看视口的尺寸
window.innerWidth/inner.Height
IE及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
封装兼容性方法，返回浏览器市口尺寸getViewportOffset()function getViewportOffset(){ if(window.innerWidth){ return{ w : window.innerWidth, h : window.innerHeight }else{ if(document.compatMode === "BackCompat"){ return{ w:document.body.clientWidth, h:document.body.clientHeight }else{ return{ w: document.document.Element.clientWidth, h: document.document.Element.clientHeight } } } }
查看元素的几何尺寸
domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的坐标
返回的结果并不是实时的
查看元素的尺寸
dom.offsetWidth, dom.offsetHeight
查看元素的位置
dom.offsetLeft, dom.offerTop
对于无定位父级的元素，返回相对文档的坐标。对于有父级定位的元素，返回相对于最近的有定位的父级的坐标。
dom.offerParent
返回最近的有定位的父级，如无，返回body,body.offsetParent返回null
让滚动条滚动
window上有三个方法
scroll(), scrollTo() scrollBy();
三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动轮到当前位置。
区别：scrollBy()会在之前的数据基础之上做累加。
<body>
<div style="~~">start</div>
<div style="~~">stop</div>
<script type ="text/javascript">
var start = document.getElementByTagName('div')[0];
var stop = document.getElementByTagName('div')[1];
var timer = 0;
var key =true;
start.onclick = function(){
if(key){
timer = setInterval(function (){
window.scrollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function(){
clearInterval(timer);
key = true;
}
脚本化css
- 读写元素css属性
dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
eg：float-->cssFloat
复合属性必须拆解，组合单词变成小驼峰写法backgroundColordiv.style.width
写入的值必须是字符串格式- 查询计算样式
window.getComputedStyle(ele,null);
计算样式只读
返回的计算样式的值都是绝对值，没有相对单位
IE及IE8以下不兼容
window.getComputedStyle(div,null).width
里面的null 可以换成“after” 用来查看伪元素的- 查询样式
ele.currentStyle
计算样式只读
返回的计算样式的值不是经过转换的绝对值
IE独有的属性
封装兼容性方法getStyle(elem,prop)
div.currentStyle.width
fucntion getStyle(elem, prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
- 令小木块移动
<div style="width:100px;height:100px;background-
color:red;position:absolute;left:0;top:0px;"></div>
<script type="text/javascript">
fucntion getStyle(elem, prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
var div = document.getElementByTagName('div')
[0];
var timer = setInterval(function (){
div.style.left = parseInt(getStyle(div, 'left')) + 1
+ 'px';
if(parseInt(div.style.left) > 500){
clearInterval(timer);
},10);//parseInt是为了取数字，因为返回的是带单位的‘px’
</script>
网友评论