offset、client、scroll系列

最新推荐文章于 2024-10-16 16:47:44 发布

聪明的墨菲特学前端

最新推荐文章于 2024-10-16 16:47:44 发布

阅读量48

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_52452081/article/details/129798103

版权

文章详细介绍了CSS中的offsetWidth/Height,clientWidth/Height和scrollWidth/Height属性，以及它们在不同情况下的应用。通过示例代码展示了如何使用这些属性获取元素的宽度、高度、内边距、边框以及滚动条信息，并且讨论了有无定位对offset属性的影响。

摘要由CSDN通过智能技术生成

三种表格展示

offset系列

offset	获取
offsetWidth	width （宽度）+ 左右的padding（内边距） + 左右的border（边框）
offsetHeight	height （高度）+ 上下的padding（内边距） + 上下的border边框）

1、父元素有定位

offset	获取
offsetTop	元素距离父元素上侧的距离
offsetLeft	元素距离父元素左侧的距离

2、父元素没有定位

offset	获取
offsetTop	元素距离上侧浏览器的距离
offsetLeft	元素距离左侧浏览器的距离

client系列

client	获取
clientWidth	width （宽度）+ 左右的padding（内边距）
clientHeight	height（高度）+ 上下的padding（内边距）
clientTop	上边框 border-top
clientLeft	左边框 border-left

scroll系列

scroll	获取
scrollWidth	width （宽度）+ 滚动条滚动的距离
scrollHeight	height（高度）+ 滚动条滚动的距离
scrollTop	上下滚动条滚动的距离
scrollLeft	左右滚动条滚动的距离

源码解析

css样式

<style>
      * {
        padding: 0;
        margin: 0;
      }
      #parent {
        position: relative;
        margin-left: 100px;
        width: 400px;
        height: 400px;
        border: 10px solid pink;
      }
      #child {
        margin-left: 50px;
        width: 200px;
        height: 200px;
        border: 5px solid red;
        padding: 10px;
        background-color: bisque;
      }

      #small {
        margin-top: 100px;
        width: 300px;
        height: 300px;
        background-color: bisque;
        overflow: auto;
      }
      #big {
        width: 500px;
        height: 500px;
      }
    </style>

html创建

<body>
    <div id="parent">
      <div id="child"></div>
    </div>

    <div id="small">
      <div id="big">
        <ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
    </div>
  </body>

js部分解析

// 一、offset系列
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    // offsetWidth: width +  左右的padding + 左右的border
    console.log(child.offsetWidth); //230
    // offsetHeight: height + 上下的padding + 上下的border
    console.log(child.offsetHeight); //230
    //1、父元素有定位
    //      offsetTop:  元素距离父元素上侧的距离
    //      offsetLeft: 元素距离父元素左侧的距离
    //2、父元素没有定位
    //      offsetTop: 元素距离上侧浏览器的距离
    //      offsetLeft: 元素距离左侧浏览器的距离
    console.log(child.offsetLeft); //有  50  没有 160
    console.log(child.offsetTop); //有   0   没有 0
    // 二、client系列
    // clientWidth:  width + 左右的padding
    console.log(child.clientWidth); //220
    // clientHeight:  height + 上下的padding
    console.log(child.clientHeight); //220
    // clientTop:  上边框 border-top
    console.log(child.clientTop); //5
    // clientLeft:  左边框 border-left
    console.log(child.clientLeft); //5
    // 三、scroll系列
    var small = document.getElementById("small");
    //   scrollWidth: width + 滚动条滚动的距离
    console.log(small.scrollWidth); //500
    //   scrollHeight:height + 滚动条滚动的距离
    console.log(small.scrollHeight); //500
    //  //   scrollTop scrollLeft 可以设置
    //   scrollTop: 上下滚动条滚动的距离
    console.log(small.scrollTop);
    //   scrollLeft: 左右滚动条滚动的距离
    console.log(small.scrollLeft);
    //   scrollTop scrollLeft 可以设置 但是只能在滚动事件下获取
    small.scrollLeft = 200
    //  设置滚动事件检测 scrollLeft和 scrollTop
    small.onscroll = function () {
      console.log(small.scrollTop);
      console.log(small.scrollLeft);
    // };