其他分享
首页 > 其他分享> > 渡一 21获取窗口属性,dom尺寸,脚本化css

渡一 21获取窗口属性,dom尺寸,脚本化css

作者:互联网

 

 查看滚动条的距离

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)

 

标签:function,渡一,return,21,dom,window,var,div,document
来源: https://www.cnblogs.com/lisa2544/p/15469502.html