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)
  • 相关阅读:
    线上项目部署
    day26 面向对象 单例模式总结
    阿里云服务器,更换操作系统步骤总结
    后端for循环补充
    前端,css
    django-admin 仿写stark组件action,filter筛选过滤,search查询
    7.20晚作业
    用户和群组管理
    7.19 晚作业
    目录和文件管理
  • 原文地址:https://www.cnblogs.com/lisa2544/p/15469502.html
Copyright © 2011-2022 走看看