js-api操作dom元素05---js动画之轮播图基础：offset,client,scroll三大系列

最新推荐文章于 2022-04-29 16:08:39 发布

A &......

最新推荐文章于 2022-04-29 16:08:39 发布

阅读量100

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/117339822

版权

轮播图基础之动画三基础：offset，client，scroll系列
1.offset系列

 <!-- offset系列 -->
    <!-- offsetLeft：获取元素距离最左边的距离
    1.1 如果父亲没有定位，那么获取的是浏览器最左边的距离
    1.2 如果父亲有定位，那么获取的是距离父亲最左边的距离 -->

    同理offsetTop：是获取元素距离最上边的距离
    如果父亲没有定位，那么获取的是浏览器最上边的距离
    如果父亲有定位，那么获取的是距离父亲最上边的距离
    <style>
        .out {
            margin-left: 20px;
            width: 500px;
            height: 200px;
            padding: 20px;
            background-color: aqua;
        }
        .inner {
            width: 400px;
            height: 150px;
            padding: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    console.log(inner.offsetLeft);   //48  父元素out没有定位时，返回的是距离body最左边的值
</script>

    <style>
        .out {
            position: absolute;
            margin-left: 20px;
            width: 500px;
            height: 200px;
            padding: 20px;
            background-color: aqua;
        }
        
        .inner {
            width: 400px;
            height: 150px;
            padding: 10px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- offset系列 -->
    <!-- offsetLeft：获取元素距离最左边的距离
    1.1 如果父亲没有定位，那么获取的是浏览器最左边的距离
    1.2 如果父亲有定位，那么获取的是距离父亲最左边的距离 -->
    <div class="out">
        <div class="inner"></div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    console.log(inner.offsetLeft); //20 父元素out有定位时，返回的是距离父元素最左边的值，父元素可以是任意的定位方式
</script>

    <style>
        .out {
            position: absolute;
            margin-left: 20px;
            width: 500px;
            height: 200px;
            padding: 20px;
            background-color: aqua;
        }
        
        .inner {
            width: 400px;
            height: 150px;
            padding: 10px;
            background-color: pink;
            font-size: 20px;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <!-- offset系列 -->
    <!-- offsetWidth:获取元素的宽度，包括border以及内边距padding，但是不包括margin -->
    <!-- offsetHeight:获取元素的高度，包括border以及内边距padding，但是不包括margin -->
    <div class="out">
        <div class="inner">1111</div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    console.log(inner.offsetWidth);   //420
    console.log(inner.offsetHeight);  //170
</script>

在这里插入图片描述
需要注意的是offsetWidth和offsetHeight只是获取宽度和高度，而不能改变元素的宽度和高度，所以我们给其属性赋值的时候，是没有作用的，在做轮播图的时候，需要结合scrollWidth属性，而不是offsetWidth;

2.scroll系列

   scrollTop和scrollLeft：获取的是内容卷上去的高度和宽度，
   当滚动条向下拉的时候，内容向上走，获取的就是上面跑出盒子范围那部分高度

    <style>
        .out {
            width: 500px;
            height: 200px;
            background-color: aqua;
            overflow: scroll;
        }
        
        .inner {
            width: 700px;
            height: 1200px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <div class="out">
        <div class="inner">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    out.addEventListener('scroll', function() {
        // console.log(11);
        console.log(this.scrollTop);
        console.log(this.scrollLeft);
    })
</script>

在这里插入图片描述
注意滚动的是父元素，所以添加事件的时候事件源是父元素，使用scrollTop和scrollLeft的对象也是父元素。

  scrollWidth和scrollHeight：获取元素的实际宽度和高度，在内容没有超出盒子时，获取的是盒子的内部宽度和高度。
  内容超出盒子时所获取的是内容实际应有的高度和宽度，在盒子内部出现滚动条的时候，获取的宽度和高度不包含滚动条。

3.client系列：可视区

      clientTop和clientLeft：获取上边框的高度和左边框的宽度

    <style>
        .out {
            position: absolute;
            margin-left: 20px;
            width: 500px;
            height: 200px;
            padding: 20px;
            background-color: aqua;
            border: 10px solid red;
        }
        
        .inner {
            width: 400px;
            height: 150px;
            padding: 10px;
            background-color: pink;
            font-size: 20px;
            line-height: 20px;
            border: 20px solid blue;
        }
    </style>
</head>

<body>

    <div class="out">
        <div class="inner">1111</div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    console.log(inner.clientTop); //20
    console.log(inner.clientLeft); //20
    console.log(out.clientTop); //10
    console.log(out.clientLeft); //10
</script>

  clientWidth和clientHeight：获取可视区的宽度和高度，包含边框内部，不包含border（与offsetWidth和offsetHeight的主要区别），包含padding

    <style>
        .out {
            position: absolute;
            margin-left: 20px;
            width: 500px;
            height: 200px;
            padding: 20px;
            background-color: aqua;
            border: 10px solid red;
        }
        
        .inner {
            width: 400px;
            height: 150px;
            padding: 10px;
            background-color: pink;
            font-size: 20px;
            line-height: 20px;
            border: 20px solid blue;
        }
    </style>
</head>

<body>

    <div class="out">
        <div class="inner">1111</div>
    </div>
</body>
<script>
    var out = document.querySelector('.out');
    var inner = document.querySelector('.inner');
    console.log(inner.clientWidth);   //420
    console.log(inner.offsetWidth);   //460
    console.log(inner.clientHeight);  //170
    console.log(inner.offsetHeight);  //210
</script>

在这里插入图片描述

A &......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-api操作dom元素05---js动画之轮播图基础：offset,client,scroll三大系列

轮播图基础之动画三基础：offset，client，scroll系列1.offset系列   同理offsetTop：是获取元素距离最上边的距离如果父亲没有定位，那么获取的是浏览器最上边的距离如果父亲有定位，那么获取
复制链接

扫一扫