标签：元素 宽高 padding 获取 offerset client div offsetWidth

获得元素宽高

属性名：clientWidth和clientHeight

使用场景：获取元素的可见部分宽高：内容 + padding（不包含边框，margin，滚动条等）

属性名：offsetWidth和offsetHeight

使用场景：获取元素的自身宽高，包含元素自身设置的宽高、padding、border

注意

1. 获取出来的是数值,方便计算
2. 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
3. 以上两种属性只能获取，不能设置
4. 获取页面宽高，通常使用clientWidth和clientHeight，获取元素宽高，通常使用：offsetWidth和offsetHeight

<style>
    div {
      width: 200px;
      height: 200px;
      padding: 10px;
      margin: 10px;
      border: 10px solid #000;
    }
  </style>

<div></div>
  <script>
    const div = document.querySelector('div')
    div.style.width

    // 获取宽高 
    // 获取页面宽高使用clientWidth
    // clientWidth:包含：内容宽 + padding
    console.log(div.clientWidth,div.clientHeight)

    // offsetWidth:包含：内容宽 + padding + border
    // 获取元素宽高：offsetWidth
    console.log(div.offsetWidth,div.offsetHeight)

  </script>

获取位置

属性名：offsetLeft和offsetTop

使用场景：获取元素距离自己定位父级元素的左、上距离，参照定位元素的位置距离

方法名：getBoundingClientRect

语法：element.getBoundingClientRect()

返回值：元素的大小及其相对于可视窗口/浏览器的位置

  <div></div>
  <script>
    const div = document.querySelector('div')
    // 大小位置
    // 参照浏览器窗口/可视窗口
    console.log(div.getBoundingClientRect())
    /*
    x: 10
    y: 10
    width: 240  内容+padding+border
    height: 240
    top: 10
    right: 250 元素右边距离窗口左边的距离
    bottom: 250
    left: 10
    */
  </script>

注意：

1. offsetLeft和offsetTop 注意是只读属性,只能获取，不能设置
2. offsetLeft和offsetTop 以带有定位的父级为参考坐标，如果上级中都没有定位则以文档左上角 为准

标签：元素,宽高,padding,获取,offerset,client,div,offsetWidth
来源： https://www.cnblogs.com/yyshow/p/16294346.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。