查看滚动条的距离
function getScrollOffset(){ if(window.pageXOffset){ return { x:window.pageXOffset, y:window.pageYOffset } }else{ return { x:document.body.scrollLeft + document.documentElement.scrollLeft, y:document.body.scrollTop + document.documentElement.scrollTop } } }
查看视口的尺寸
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{ w:document.documentElement.clientWidth, h:document.documentElement.clientHeight } } }
让滚动条滚动
window上有三个方法
scroll(x,y),
scrollTo(x,y),
scrollBy(x,y);//会在之前的基础上做累加
利用scrollBy()快速阅读的功能
var start = document.getElementsByTagName("div")[0]; var stop = document.getElementsByTagName("div")[1]; var timer = 0; var key = true; start.onclick = function(){ if(key){ timer = setInterval(function(){ window.scrollBy(0,10); }) key = false; } } stop.onclick = function(){ clearInterval(timer); key = true; }
window.getComputedStyle(ele,null);
计算样式只读,返回的值是绝对值,null是取伪类元素的值
div::after{ content:""; width:20px; height:50px; background-color:green; display:inline-block; }
function getStyle(elem,prop){ if(window.getComputedStyle){ return window.getComputedStyle(elem,null)[prop]; }else{ return elem.currentStyle[prop]; } } var div = document.getElementsByTagName("div")[0]; setInterval(function(){ // div.style.left = getStyle(div,left); div.style.left = parseInt(getStyle(div,'left'))+1+"px" },100)