offsetLeft、scrollLeft、clientLeft

最新推荐文章于 2022-09-09 16:55:42 发布

热爱代码的chocolate

最新推荐文章于 2022-09-09 16:55:42 发布

阅读量164

点赞数

分类专栏： JavaScript 文章标签： JS

本文链接：https://blog.csdn.net/weixin_45615784/article/details/101723362

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

offsetLeft、scrollLeft、clientLeft

在这里插入图片描述

offsetLeft
返回当前元素的相对水平偏移位置的偏移容器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      /*position: relative;*/
      width: 300px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      margin: 50px;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 50px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child">
    
    </div>
  </div>

  <script type="text/javascript">
    var box = document.getElementById('box');
    var child = document.getElementById('child');
/*    console.log(box.offsetParent);
    //offsetParent,有定位的父元素
    console.log(box.offsetLeft);
    //左外边距
    console.log(box.offsetLeft);
    //上外边距
    console.log(box.offsetWidth);
    //内容宽度
    console.log(box.offsetHeight);
    //offset属性，回去盒子大小和盒子距离父级元素*/

    console.log(child.offsetParent);
    //offsetParent,有定位的父元素
    console.log(child.offsetHeight);
  </script>
</body>
</html>

scrollLeft
返回当前视图中的实际元素的左边缘和左边缘之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 30px solid red;
      padding: 10px;
      background-color: green;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="box">
    今天：@电影小Q官博 发文宣布该片票房正式破亿。据悉，该片由任达华
  </div>
  
  <script type="text/javascript">
    var box = document.getElementById('box');
    //横向滚动条的距离
    console.log(box.scrollLeft);
    //纵向滚动条的距离
    console.log(box.scrollTop);
    //内容距离减去滚动条距离
    console.log(box.scrollWidth);
    //内容的总高度
    console.log(box.scrollHeight);

    //scroll，获取滚动内容大小和位置
  </script>
</body>
</html>

clientLeft
等于border-left的值

热爱代码的chocolate

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
offsetLeft、scrollLeft、clientLeft

offsetLeft、scrollLeft、clientLeftoffsetLeft返回当前元素的相对水平偏移位置的偏移容器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &...
复制链接

扫一扫