offset、client、scroll三大系列

最新推荐文章于 2024-07-12 16:27:40 发布

等归,

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量199

点赞数 1

文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_50370865/article/details/128087602

版权

html代码：

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

  <div id="parent1">
    <div id="child1"></div>
  </div>
</body>

css样式：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #parent {
    width: 800px;
    height: 600px;
    border: 20px solid red;
    margin-left: 100px;
    margin-top: 50px;
    position: relative;
  }

  #child {
    width: 300px;
    height: 400px;
    margin-left: 50px;
    margin-top: 100px;
    background-color: black;
    border: 10px solid blue;
    padding: 10px 20px;
    border-top: 20px solid red;
  }

  #parent1 {
    width: 400px;
    height: 400px;
    overflow: scroll;
    margin: 0 auto;
  }

  #child1 {
    width: 600px;
    height: 600px;
    background-color: aqua;
  }
</style>

一、offset 系列：

1、offset 系列：

（1）offsetHeight ：

（2）offsetWidth :

(1)offsetHeight ：本身的高度 + 上下的边框 + 上下的padding
(2)offsetWidth : 本身的宽度 + 左右的边框 + 左右的padding

  var parent = document.getElementById('parent');
  console.log(parent);
  var child = document.getElementById('child')
  console.log(child);

  var parent1 = document.getElementById('parent1');
  console.log(parent1);
  var child1 = document.getElementById('child1')
  console.log(child1);
  // offset 系列
  console.log(child.offsetHeight);   // 本身的高度 + 上下边框 + 上下内边距   = 440
  console.log(child.offsetWidth);

2、offsetLeft 系列

(1) 父元素没有定位，相当于距离左侧浏览器的距离

(2) 父元素有定位，相当于距离父元素左侧的距离

2、offsetLeft 系列

  (1) 父元素没有定位，相当于距离左侧浏览器的距离
        父元素的左外边距 + 父元素的左侧的边框 + 子元素到父元素的左外边距

  (2) 父元素有定位， 相当于距离父元素左侧的距离
        子元素到父元素的左外边距

 console.log(child.offsetLeft);     // 父元素没有定位 ：子元素到浏览器左侧的距离 = 父元素的左外边距 + 父元素的左边框 + 子元素的左外边距 
 console.log(child.offsetLeft);     // 父元素有定位   ：子元素的左外边距

3、offsetTop 系列

(1) 父元素没有定位，相当于距离上侧浏览器的距离

(2) 父元素有定位，相当于距离父元素上侧的距离

3、offsetTop 系列

  (1) 父元素没有定位，相当于距离上侧浏览器的距离
        父元素的上外边距 + 父元素的上侧的边框 + 子元素到父元素的上外边距

  (2) 父元素有定位， 相当于距离父元素上侧的距离
        子元素到父元素的上外边距

console.log(child.offsetTop);      // 父元素没有定位 ：子元素到浏览器顶侧的距离 = 父元素的上外边距 + 父元素的上边框 + 子元素的上外边距
console.log(child.offsetTop);      // 父元素有定位   ：子元素的上外边距

二、 client 系列：

(1) clientHeight

(1) clientHeight ：本身的高度 + 上下的padding

console.log(child.clientHeight);  // 本身的高度 + 上下内边距

(2) clientWidth

(2) clientWidth : 本身的宽度 + 左右的padding

 console.log(child.clientWidth);   // 本身的宽度 + 左右内边距

(3) clientLeft

(3) (3) clientLeft : 左侧边框 border-left

console.log(child.clientLeft);    // 左侧边框

(4) clientTop

(4) clientTop : 上边框 border-top

 console.log(child.clientTop);     // 上边框

三、scroll 系列：

(1) scrollWidth

(1) scrollWidth : 本身的宽度 + 滚动条卷去的最大宽度

  console.log(parent1.scrollWidth);  // 本身的宽度 + 滚动条卷去的长度

(2) scrollHeight

(2) scrollHeight : 本身的高度 + 滚动条卷去的最大高度

 console.log(parent1.scrollHeight);  // 本身的高度 + 滚动条卷去的长度

(3) scrollLeft

(3) scrollLeft : 滚动事件下才会触发可以设置

 parent1.onscroll = function () {
    console.log(this.scrollLeft);   //  滚动条滚动的距离  = 0
  }

(4) scrollTop

(4) scrollTop : 滚动事件下才会触发可以设置

  parent1.onscroll = function () {
    console.log(this.scrollTop);   //  滚动条滚动的距离
  }

等归,

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
offset、client、scroll三大系列

offset、client、scroll三大系列
复制链接

扫一扫

offset、client、scroll三大系列

offset、client、scroll系列

一、offset 系列 ：

1、offset 系列 ：

（1）offsetHeight ：

（2）offsetWidth :

2、offsetLeft 系列

(1) 父元素没有定位，相当于距离左侧浏览器的距离

(2) 父元素有定位， 相当于距离父元素左侧的距离

3、offsetTop 系列

(1) 父元素没有定位，相当于距离上侧浏览器的距离

(2) 父元素有定位， 相当于距离父元素上侧的距离

二、 client 系列 ：

(1) clientHeight

(2) clientWidth

(3) clientLeft

(4) clientTop

三、scroll 系列：

(1) scrollWidth

(2) scrollHeight

(3) scrollLeft

(4) scrollTop

“相关推荐”对你有帮助么？

一、offset 系列：

1、offset 系列：

(2) 父元素有定位，相当于距离父元素左侧的距离

(2) 父元素有定位，相当于距离父元素上侧的距离

二、 client 系列：