zoukankan      html  css  js  c++  java
  • 渡一 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)
  • 相关阅读:
    [c++ 11x rvalue reference]
    Exception Cost
    How to set NoStepInto for VS debugging
    STL算法find_if和find
    [转载]The Biggest Changes in C++11 (and Why You Should Care)
    QT信号和槽
    读《构建之法》前三章有感
    复利计算器(3)——数据库
    《构建之法》——第四章
    操作系统命令行解释
  • 原文地址:https://www.cnblogs.com/lisa2544/p/15469502.html
Copyright © 2011-2022 走看看