JS之元素大小高宽

最新推荐文章于 2023-07-31 16:04:39 发布

易01

最新推荐文章于 2023-07-31 16:04:39 发布

阅读量167

点赞数

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

本文链接：https://blog.csdn.net/u012733501/article/details/105386854

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

offsetHeight和offsetWidth

偏移量，包括元素所有的可见高度或宽度，就是包括其内容+padding+边框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .box {
      border: 20px solid black;
      width: 100px;
      height: 100px;
      padding: 20px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="box" data-customer="uy">
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
    这是一行
  </div>
 
  <script>
    // 这是一个高度100的box，上下边框20+20，内上边距+内下边距20+20,所以offsetHeight=100+40+40=180，高度同理
    let offsetHeight=document.getElementsByClassName('box')[0].offsetHeight;
    let offsetWidth=document.getElementsByClassName('box')[0].offsetWidth
    console.log(`offsetHeight=${offsetHeight},offsetWidth=${offsetWidth}`)
  </script>
</body>

</html>

在这里插入图片描述

当前元素的的可见高度或宽度。那么引入眼帘的就是一个黑边框+里面的内容。所以这里的偏移量就是上下边框（20+20）+内容（100）+上下内边距（20+20）=180的offsetHeight

clientHeight和clientWidth

元素内容+边距的高和宽。相较于offsetHeight和offsetWidth，少了边框的宽度。

scrollHeight 和 scrollWidth

元素内容的总高度或总宽度

易01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS之元素大小高宽

目录offsetHeight和offsetWidthclientHeight和clientWidthscrollHeight 和 scrollWidthoffsetHeight和offsetWidth偏移量，包括元素所有的可见高度或宽度，就是包括其内容+padding+边框<!DOCTYPE html><html lang="en"><head>...
复制链接

扫一扫