offset系列，scroll系列

Posted 2021-03-15 xy-ouyang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了offset系列，scroll系列相关的知识，希望对你有一定的参考价值。

1.offset系列

    * 在style标签中设置的css样式属性，不能使用如下方法:
       ele.style.width
       ele.style.height

   * 以后获取元素的宽和高，使用如下方法
       ele.offsetWidth;//获取宽(包含边框)
       ele.offsetHeight;//获取高(包含边框)

   * 获取元素距离左边(上)的距离
       ele.offsetLeft;
       ele.offsetTop;

   * ele.offsetLeft的值与什么有关？
       - 没有脱离文档流
       offsetLeft=父元素的margin+父元素的padding+父元素的border+自己的margin
       offsetLeft=自己的left+自己的margin

2.直接通过document获取元素
   * 获取body
       var ele = document.body;//返回body元素
   * 获取title
       document.title;//获取title标签中的文本
       document.title="重新赋值";
   * document.documentElement;//获取html标签

3.案例：图片跟着鼠标飞

　　存在兼容问题，IE不起作用

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<img src="a.jpg" style="position: absolute;width: 100px"/>
<script type="text/javascript">
    document.onmousemove = function(e){
        var ele = document.getElementsByTagName("img")[0];
        ele.style.left = e.clientX + "px";
        ele.style.top = e.clientY + "px";
    };
</script>
</body>
</html>

4.scroll系列

* ele.scrollWidth:元素中内容的实际的宽(没有边框)，如果没有内容或内容没有充满就是元素的宽(不包含边框)
* ele.scrollHeigth:元素中内容的实际的高(没有边框)，如果没有内容或内容没有充满就是元素的宽(不包含边框)
* ele.scrollLeft:元素中卷起的内容，向左卷起的距离
* ele.scrollTop：元素中卷起的内容，向上卷起的距离

5.滚动事件onscroll

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;border:2px solid red;overflow: auto">
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</div>
<script type="text/javascript">
    console.log("高"+document.getElementById("box").scrollHeight);
    document.getElementById("box").onscroll = function(){
        console.log(this.scrollTop);
    };
</script>
</body>
</html>

6.封装getScroll()函数

//获取浏览器向上卷起的距离，向左卷起的距离
function getScroll() {
    return {
        left:window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft ||0 ,
        top:window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop ||0
    };
}

//测试
window.onscroll = function() {
    console.log(getScroll().top);
};

7.案例：固定导航栏

window.onscroll = function(){
    if(getScroll().top > my$("topPart").offsetHeight){
        my$("navBar").className = "nav fixed";
        my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px";
    }else{
        my$("navBar").className = "nav";
        my$("mainPart").style.marginTop = "10px";
    }
};

8.变速动画函数封装

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        input{
            margin-top: 20px;
        }
        div{
            margin-top: 30px;
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="移动到400px"/>
<input type="button" id="btn2" value="移动到800px"/>
<div id="box"></div>
<script type="text/javascript">
    document.getElementById("btn1").onclick = function(){
        animate(document.getElementById("box"),400);
    };
    document.getElementById("btn2").onclick = function(){
        animate(document.getElementById("box"),800);
    };

    //封装函数，ele为操作的元素，target为元素移动到目标位置
    function animate(ele, target){
        //清理定时器
        clearInterval(ele.timeId);
        var current = ele.offsetLeft;//当前元素的位置，数字类型
        ele.timeId = setInterval(function(){
            //每次移动10px
            var step = (target-current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            current += step;
            ele.style.left=current + "px";

            if(current == target){
                clearInterval(ele.timeId);
            }
            //测试代码
            console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
        },20);
    }
</script>
</body>
</html>

9.案例：筋斗云

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: rgba(0, 0, 0, 0.8);
        }
        .box {
            width: 800px;
            height: 42px;
            background: #fff url("images/wifi.png") right center no-repeat;
            margin: 200px auto;
            border-radius: 8px;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li {
            float: left;
            width: 83px;
            height: 42px;
            text-align: center;
            font: 500 16px/42px "simsun";
            cursor: pointer;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat;
        }
    </style>
</head>
<body>
<div class="box">
    <span></span>
    <ul>
        <li>首页新闻</li>
        <li>活动策划</li>
        <li>师资力量</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
</div>
<script type="text/javascript">
    var cloud = document.getElementsByTagName("span")[0];
    var lis = document.getElementsByTagName("li");
    var lastPosition = 0;//点击的时候，记录当前的位置
    for(var i=0; i<lis.length;i++){
        lis[i].onclick = clickHandler;
        lis[i].onmouseover = mouseoverHandler;
        lis[i].onmouseout = mouseoutHandler;
    }
    function clickHandler(){
        lastPosition = this.offsetLeft;
    };
    function mouseoverHandler(){
        animate(cloud,this.offsetLeft);
    };
    function mouseoutHandler(){
        animate(cloud,lastPosition);
    };
    //封装函数，ele为操作的元素，target为元素移动到目标位置
    function animate(ele, target){
        //清理定时器
        clearInterval(ele.timeId);
        var current = ele.offsetLeft;//当前元素的位置，数字类型
        ele.timeId = setInterval(function(){
            //每次移动10px
            var step = (target-current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            current += step;
            ele.style.left=current + "px";
            if(current == target){
                clearInterval(ele.timeId);
            }
            //测试代码
            console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
        },20);
    }
</script>
</body>
</html>

10.获取元素计算后的样式属性值
   console.log(my$("dv").offsetLeft);//<div id="dv">不拖标，就不能获取其值
   console.log(window.getComputedStyle(ele,null).left);//谷歌火狐支持，IE8不支持
   console.log(ele.currentStyle.left);//谷歌不支持，IE8支持
   * 兼容代码

//获取任意一个元素的任意一个样式属性的值
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }else{
        return ele.currentStyle[attr];
    }
};

* 测试：getStyle(ele,"left");

11.封装变速动画函数，增加一个属性

//封装函数，ele为操作的元素，attr为属性名字，target为元素移动到目标位置
function animate(ele, attr, target){
    //清理定时器
    clearInterval(ele.timeId);
    //var current = ele.offsetLeft;//当前元素的位置，数字类型
    var current = parseInt(getStyle(ele,attr));//当前元素的attr属性的值，数字类型，去除了px
    ele.timeId = setInterval(function(){
        //每次移动10px
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        //ele.style.left=current + "px";
        ele.style[attr]=current + "px";

        if(current == target){
            clearInterval(ele.timeId);
        }
        //测试代码
        console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
    },20);
}

//获取任意一个元素的任意一个样式属性的值
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }else{
        return ele.currentStyle[attr];
    }
};

　　使用div移动测试上面封装的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            margin-top: 20px;
        }
        div{
            margin-top: 30px;
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="移动到400px"/>
<input type="button" id="btn2" value="移动到800px"/>
<div id="box"></div>
<script type="text/javascript">
    document.getElementById("btn1").onclick = function(){
        animate(document.getElementById("box"),"width",400);
    };
    document.getElementById("btn2").onclick = function(){
        animate(document.getElementById("box"),"width",800);
    };

    //封装函数，ele为操作的元素，attr为属性名字，target为元素移动到目标位置
    function animate(ele, attr, target){
        //清理定时器
        clearInterval(ele.timeId);
        //var current = ele.offsetLeft;//当前元素的位置，数字类型
        var current = parseInt(getStyle(ele,attr));//当前元素的attr属性的值，数字类型，去除了px
        ele.timeId = setInterval(function(){
            //每次移动10px
            var step = (target-current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            current += step;
            //ele.style.left=current + "px";
            ele.style[attr]=current + "px";

            if(current == target){
                clearInterval(ele.timeId);
            }
            //测试代码
            console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
        },20);
    }

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    };
</script>
</body>
</html>

12.封装变速动画函数增加任意多个属性，并增加一个回调函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            margin-top: 20px;
        }
        div{
            margin-top: 30px;
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="移动到400px"/>
<input type="button" id="btn2" value="移动到800px"/>
<div id="box"></div>
<script type="text/javascript">
    document.getElementById("btn1").onclick = function(){
        //结果：<div id="box" style="left: 400px; top: 100px; width: 100px; height: 100px;"></div>
        animate(document.getElementById("box"),{"left":400,"top":100,"width":100,"height":100});
    };
    document.getElementById("btn2").onclick = function(){
        animate(document.getElementById("box"),{"left":800},function(){
            animate(document.getElementById("box"),{"left":400});
        });
    };
    //封装函数，ele为操作的元素，attr为属性名字，target为元素移动到目标位置
    function animate(ele, json, fn){
        //清理定时器
        clearInterval(ele.timeId);
        ele.timeId = setInterval(function(){
            var flag = true;
            for(var attr in json){
                var current = parseInt(getStyle(ele,attr));
                var target = json[attr];
                //每次移动10px
                var step = (target-current)/10;
                step = step>0?Math.ceil(step):Math.floor(step);
                current += step;
                ele.style[attr]=current + "px";
                if(current != target){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(ele.timeId);
                //所有属性到达目标才能使用这个回调函数
                if(fn){fn();}
            }
            //测试代码
            console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
        },20);
    }
    //兼容代码：获取任意一个元素的任意一个样式属性的值
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    };
</script>
</body>
</html>

13.动画函数增加透明度和层级

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            /*margin-top: 20px;*/
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 10;
        }
        div{
            /*margin-top: 30px;*/
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="移动到400px"/>
<!-- <input type="button" id="btn2" value="移动到800px"/> -->
<div id="box"></div>
<script type="text/javascript">
    document.getElementById("btn1").onclick = function(){
        //结果：<div id="box" style="left: 0px; top: 0px; width: 400px; height: 400px; z-index: 1000; opacity: 0.2;"></div>
        animate(
            document.getElementById("box"),
            {"left":400,"top":400,"width":100,"height":100,"zIndex":1000,"opacity":0.2},
            function(){
                animate(document.getElementById("box"),{"left":0,"top":0,"width":400,"height":400});
        });
    };
    // document.getElementById("btn2").onclick = function(){
    //     animate(document.getElementById("box"),{"left":800});
    // };

    //封装函数，ele为操作的元素，attr为属性名字，target为元素移动到目标位置
    function animate(ele, json,fn){
        //清理定时器
        clearInterval(ele.timeId);

        ele.timeId = setInterval(function(){
            var flag = true;
            for(var attr in json){
                if(attr == "opacity"){
                    //获取当前元素的透明度，放大100倍
                    var current = getStyle(ele,attr)*100;
                    //目标的透明度放大100倍
                    var target = json[attr]*100;
                    var step = (target-current)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    current += step;
                    ele.style[attr]=current/100; 
                }else if(attr == "zIndex"){
                    ele.style[attr] = json[attr];
                }else{
                    var current = parseInt(getStyle(ele,attr));
                    var target = json[attr];
                    //每次移动10px
                    var step = (target-current)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    current += step;
                    ele.style[attr]=current + "px";
                }

                if(current != target){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(ele.timeId);
                //所有属性到达目标才能使用这个回调函数
                    if(fn){fn();}
            }

            //测试代码
            console.log("目标位置："+ target + "，当前位置：" + current + "，每次移动步长：" + step);
        },20);
    }

    //获取任意一个元素的任意一个样式属性的值
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    };
</script>
</body>
</html>

14.案例：手风琴

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{list-style: none}
        *{margin:0; padding:0;}
        div{
            /*width: 1150px;*/
            width: 1200px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;

        }
        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul {
            width: 1300px;
        }
    </style>
    <script src="jquery1.0.0.1.js"></script>
    <script>
        window.onload = function () {
            //需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，回复原样。
            //步骤：
            //1.给li添加背景
            //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
            //3.移开大盒子，回复原样

            var div = document.getElementsByTagName("div")[0];
            var liArr = div.getElementsByTagName("li");
            //1.给li添加背景
            for(var i=0;i<liArr.length;i++){
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";

                //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
                liArr[i].onmouseover = function () {
                    //排他思想
                    for(var j=0;j<liArr.length;j++){
                        //引用框架实现宽度变窄
                        //animate(liArr[j],{"width":0});
                        animate(liArr[j],{"width":100});
                    }
                    //剩下他自己
                   //animate(this,{"width":1200})
                   animate(this,{"width":800})
                }
            }

            //3.移开大盒子，回复原样
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
        }
    </script>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

15.client系列的相关属性
   * clientWidth:可视区域的宽(没有边框)
   * clientHeight:可视区域的高(没有边框)
   * clientLeft:可视区域到最左边的距离，即左边框的宽
   * clientTop:可视区域到最上边的距离，即上边框的宽

16.案例：图片跟着鼠标飞(有滚动条的时候有问题)

// 兼容代码：
document.onmousemove = function(e){
    e = window.event || e;
    my$("img").style.left = e.clientX + "px";//可视区域的横坐标
    my$("img").style.top = e.clientY + "px";//可视区域的纵坐标
};

以上是关于offset系列，scroll系列的主要内容，如果未能解决你的问题，请参考以下文章

offset系列scroll系列与client系列

offset系列，scroll系列

client,offset.scroll系列/案例

clent ;offset ; scroll 系列

元素的client offset scroll三个系列

offset client scroll 三大系列