javaScript：DOM中常用尺寸

于 2023-09-05 17:45:43 发布
阅读量476 收藏 4
点赞数 3
分类专栏： javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52799985/article/details/132696373
版权

目录

前言（可以根据图示找到需要的尺寸，便于理解）

内尺寸

clientWidth 包含左右padding和宽度width（忽略滚动条的宽度）

clientHeight 包含上下padding和height（忽略滚动条的高度）

clientTop 获取元素上边框的大小

clientLeft 获取元素左边框的大小

外尺寸 

offsetWidth 包含左右padding 和 width 以及 border，包含滚动条宽度

offsetHeight 包含上下padding 和 height 以及border ，包含滚动条高度

 offsetParent:获取当前元素对象具有定位属性的父级元素

offsetLeft 指的是 当前元素的左边框距离  offsetParent 左边框的距离

offsetTop 指的是 当前元素的上边框距离  offsetParent 上边框的距离

相关代码 （重在理解）

滚动尺寸（案例中会用到，常用）

滚动尺寸scrollWidth（ scrollHeight ）（重点理解）

垂直滚动条与元素顶部距离scrollTop

水平滚动条与元素左边距离 scrollLeft

相关代码 

案例（要理解）

1.缓慢回到顶部

效果图

相关代码（代码较长，且注释比较详细不在逐行讲解，重点掌握实现的思路和对知识点的运用）

2.懒加载（会单独写一篇文章来讲）

前言（可以根据图示找到需要的尺寸，便于理解）

      在js中我们可以通过dom操作获取想要得到的尺寸，并对其进行一系列操作使其可以帮助我们实现动态布局、响应式设计、动画效果、碰撞检测等一系列功能。在这篇文章中，我们将了解常用的dom尺寸，并配合相关案例，来帮助我们了解和掌握这部分知识。

内尺寸

内尺寸

clientWidth 包含左右padding和宽度width（忽略滚动条的宽度）

clientHeight 包含上下padding和height（忽略滚动条的高度）

clientTop 获取元素上边框的大小

clientLeft 获取元素左边框的大小

外尺寸 

外尺寸（常用）

offsetWidth 包含左右padding 和 width 以及 border，包含滚动条宽度

offsetHeight 包含上下padding 和 height 以及border ，包含滚动条高度

 offsetParent:获取当前元素对象具有定位属性的父级元素

 offsetParent:获取当前元素对象具有定位属性的父级元素，如果所有的父级元素都没 定位属性，那么在标准浏览器下，offsetParent 指的是body，ie下是html

body和html 的offsetParent 都是null

offsetLeft 指的是 当前元素的左边框距离  offsetParent 左边框的距离

offsetTop 指的是 当前元素的上边框距离  offsetParent 上边框的距离

相关代码 （重在理解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom中常用尺寸</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 300px;
            height: 300px;
            border: 10px #f00 solid;
            padding: 10px;
            margin: 20px auto;
            overflow: auto;
        }
        .far{
            width: 600px;
            margin: 20px auto;
            border: 10px #f60 solid;
            padding: 50px 0;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="far">
    <div class="wp">
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐
        豫章故郡，洪都新府，星分翼轸，地接衡庐豫章故郡，洪都新府，星分翼轸，地接衡庐

    </div>
    </div>
</body>
</html>
<script>
    let wp = document.querySelector('.wp')
    /*
    内尺寸
    clientWidth 包含左右padding和宽度width（忽略滚动条的宽度）
    clientHeight 包含上下padding和height（忽略滚动条的高度）
    clientTop 获取元素上边框的大小
    clientLeft 获取元素左边框的大小

    外尺寸
    offsetWidth 包含左右padding 和 width 以及 border，包含滚动条宽度
    offsetHeight 包含上下padding 和 height 以及border ，包含滚动条高度

    offsetParent:获取当前元素对象具有定位属性的父级元素，如果所有的父级元素都没
    定位属性，那么在标准浏览器下，offsetParent 指的是body，ie下是html
    body和html 的offsetParent 都是null

    offsetLeft 指的是 当前元素的左边框距离  offsetParent 左边框的距离
    offsetTop 指的是 当前元素的上边框距离  offsetParent 上边框的距离
    */
   console.log(wp.clientWidth,wp.clientHeight,wp.clientTop,wp.clientLeft);
   let body = document.body;
   console.log(body.clientWidth,body.clientHeight);


   console.log(wp.offsetWidth,wp.offsetHeight);

   //获取当前元素的定位父元素
   console.log(wp.offsetParent,wp.offsetLeft,wp.offsetTop);
</script>

滚动尺寸（案例中会用到，常用）

滚动尺寸scrollWidth（ scrollHeight ）（重点理解）

scrollWidth滚动尺寸 返回值，当子级元素内容宽度大于 目标元素内容宽度的时候，那么

scrollWidth=子级盒模型的宽度+左右padding  ； 当子级元素内容宽度小于目标元素内容的时候

    scrollWidth = width + 左右padding

    scrollHeight 和 scrollWidth一致

垂直滚动条与元素顶部距离scrollTop

scrollTop  垂直滚动条与元素顶部距离，可以理解为元素内容被卷上去的高度，可以设置该值

水平滚动条与元素左边距离 scrollLeft

    scrollLeft 水平滚动条与元素左边距离，可以理解为元素内容被卷到左边的宽度，可以设置该值

相关代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动尺寸</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 400px;
            height: 400px;
            border: 1px #000 solid;
            overflow: auto;
            padding: 0 30px;
        }
        .cont{
            width: 800px;
            height: 800px;
            background: pink;

        }
        #toTop{
            width: 60px;
            height: 60px;
            background-color: pink;
            text-align: center;
            line-height: 30px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="cont">
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
            滕王高阁临江，飞羽阿打卡搭嘎含税单价<br>
        
        </div>
    </div>
    <button id="btn">点击获取卷上去的高度</button>
    <div style="height: 2000px;"></div>
    <span id="toTop">回到 <br> 顶部</span>
</body>
</html>
<script>
    /*
    scrollWidth滚动尺寸 返回值，当子级元素内容宽度大于 目标元素内容宽度的时候，那么
    scrollWidth=子级盒模型的宽度+左右padding  ； 当子级元素内容宽度小于目标元素内容的时候
    scrollWidth = width + 左右padding

    scrollHeight 和 scrollWidth一致

    scrollTop  垂直滚动条与元素顶部距离，可以理解为元素内容被卷上去的高度，可以设置该值

    scrollLeft 水平滚动条与元素左边距离，可以理解为元素内容被卷到左边的宽度，可以设置该值
    */
   let wp = document.querySelector('.wp') 
   let btn = document.querySelector('#btn')
   console.log(wp.scrollWidth,wp.scrollHeight,wp.scrollTop);
   btn.onclick=function(){
    wp.scrollTop = 400;
    console.log(wp.scrollTop);
   }
   //回到顶部
   let timmer;
   let totop= document.querySelector('#toTop')
   toTop.onclick = function(){
    //首先获取卷上去的高度
      clearInterval(timmer)
      timmer = setInterval(function(){
        let h = document.documentElement.scrollTop;
        console.log(h);
        if(h>0){
            h-=100;
            document.documentElement.scrollTop == h;
        }else{
            document.documentElement.scrollTop == 0;
            clearInterval(timmer)
        }

      },20);
   }
</script>

案例（要理解）

1.缓慢回到顶部

效果图

相关代码（代码较长，且注释比较详细不在逐行讲解，重点掌握实现的思路和对知识点的运用）

<!DOCTYPE html>
<html>
<head>
  <title>回到顶部</title>
  <style>
    #backToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: #333;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.3s;
    }

    #backToTop:hover {
      opacity: 1;
    }
    .wp{
        height: 3000px;
        width: 1200px;
        background-color: pink;
    }
  </style>
</head>
<body>
  <div id="content">
    <!-- Your page content here -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <!-- ... -->
  </div>
    <div class="wp">

    </div>
  <div id="backToTop">^</div>

  <script>
    // 获取“回到顶部”按钮元素
    var btn = document.getElementById("backToTop");

    // 添加点击事件监听
    btn.addEventListener("click", function() {
      // 获取当前滚动位置
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      // 定义一个动画函数
      function scrollToTop() {
        // 计算每一帧滚动的距离
        var scrollStep = Math.max(scrollTop / 30, 10);

        // 获取当前滚动位置
        var currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // 如果还没有到达顶部，则继续滚动
        if (currentScrollTop > 0) {
          // 计算下一帧的滚动位置
          var newScrollTop = currentScrollTop - scrollStep;
          // 设置滚动位置
          document.documentElement.scrollTop = newScrollTop;
          document.body.scrollTop = newScrollTop;

          // 使用 setTimeout 调用下一帧滚动
          setTimeout(scrollToTop, 10);
        }
      }

      // 启动滚动动画
      scrollToTop();
    });

    // 监听页面滚动事件，控制按钮的显示与隐藏
    window.addEventListener("scroll", function() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 300) {
        btn.style.display = "block";
      } else {
        btn.style.display = "none";
      }
    });
  </script>
</body>
</html>

2.懒加载（会单独写一篇文章来讲）

        对于懒加载的内容，我会单独写一篇文章进行详细介绍，以便更好地解释懒加载的概念、原理和使用方法，并综合使用DOM尺寸的情况进行说明。期待您的关注和期待！在文章完成后，我将很高兴为您提供反馈或帮助。谢谢！

小姚学前端
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
js获取dom元素的宽度数值
业余前端的职业经历
02-01 557
有的时候我们需要依赖元素的具体的宽高数值，那这个时候就需要你来进行调用了相关的api进行获取了。更新到 1024篇博客 退休。关注我 持续更新前端知识。
Js 精确获取Dom元素宽度/高度
飞扬_柳絮的专栏
08-29 2637
css像素解析： 四舍五入解析的浏览器：IE8、IE9、Chrome、Firefox 直接取整解析的浏览器：IE7、Safari 获取元素精确的宽度/高度(带小数位像素) 问题：document.getElementById(id).style.width 只能获取元素行内样式的值 解决办法一： window.getComputedStyle(element)...
js获取dom元素宽高的方法
最新发布
天上白玉京，十二楼五城，仙人抚我顶，结发授长生
04-27 2003
这种⽅法，⼀般⽤于计算元素的绝对位置，根据视窗左上⻆的点来算的。这种⽅法，也是有⼀定局限性，不过我们三种常⽤css样式都能获取。这种⽅法，有⼀定局限性，只能取。
笔记：dom元素各种宽度和高度，getBoundingClientRect，clientWidth,clientHeight,offsetWidth,offsetHeight
YanHSama的博客
04-25 2542
dom.clientwidth
JS中DOM元素获取的宽和高的方法小结
热门推荐
不想写代码的一天
05-28 2万+
网页可见区域宽： document.body.clientWidth （可变） 网页可见区域高： document.body.clientHeight （可变） 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
JavaScript中常用的函数类型.docx
11-26
JavaScript是一种广泛应用于Web开发的脚本语言，它在网页中主要用于处理用户交互、操作DOM（文档对象模型）以及与服务器进行数据交换等任务。在JavaScript中，函数是重要的组成部分，它们允许我们封装可重复使用的...
10个在JavaScript开发中常遇到的BUG
10-18
以下是在JavaScript开发过程中常遇到的BUG以及知识点的详细介绍： 1. 相等判断的混淆：在JavaScript中，进行值比较时很容易混淆相等操作符(==)、严格相等操作符(===)和赋值操作符(=)。赋值操作符是将右边的值赋给...
DesignPatterns:JavaScript设计模式
05-29
在JavaScript中，可以使用事件监听和触发来实现观察者模式，如DOM事件监听和发布订阅模式。 四、策略模式 策略模式定义了一系列可互换的算法，并将每一个算法封装起来，使它们可以相互替换。在JavaScript中，可以...
JS_SumUp:javascript 的日常总结
05-15
AJAX（异步JavaScript和XML）允许不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，现代Web开发中常使用fetch API作为替代。 JavaScript还有强大的DOM（文档对象模型）操作，用于动态修改网页内容，如...
week3CodingAssignment:JavaScript第3周编码分配简介
04-24
数组和数组方法也是JavaScript中常用的数据结构。数组提供了多种操作数据的方法，如push、pop、shift、unshift、slice、splice等。掌握这些方法可以有效处理和操作数据集。 DOM操作是前端开发中的关键技能。通过...
css里dom宽度,2019-08-23 DOM中各种高度、宽度
weixin_42520025的博客
08-04 1167
1.引言对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。2.常见x,y属性概念1. e.clientX 是目标点距离浏览器可视范围的X轴坐标2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离[没有滚动条时pageX=clientX,有滚动条时pageX=clientX...
js 获取dom的高度和宽度，可滚动宽高距离，当前滚动位置
PrimaryColor
02-22 6061
dom节点属性： clientWidth（不推荐）：dom节点可视区域的宽度。（可滚动距离不算在内哈。） clientHeight（不推荐）：dom节点可视区域的高度。（可滚动距离不算在内哈。） offsetWidth：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） offsetHeight：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） scrollWidth：dom节点的内容可滚动距离，横向滚动距离。（注意：overflow:hidden时也能获
获取一个dom距离顶部的高度
E的小小地方
03-10 3443
selectorQuery.selectAll('.className').boundingClientRect(function(rects) { _this.right_height = rects.map((item) => item.top); console.log(_this.right_height) }).exec();
获取 DOM 实际宽度 offsetWidth | 文本宽度 measureText
海胆的博客
03-07 525
dom.offsetWidth 获取的是div的宽度。// 通过 measureText 计算。'海胆 .7~^@，aA'// 添加 dom 显示。
js基础4 使用dom操作/getStyle/scrollHeight/协议滚动禁用例子/div随鼠标移动/冒泡/事件的委派/事件的绑定
Kerryliuyue的博客
03-22 301
图片切换的练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3576
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总）
孤云博客
03-14 5228
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from：http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的...
DOM元素尺寸offsetWidth,scrollWidth,clientWidth等详解
陈天天
07-01 1万+
例子：<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px"> <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div> <script>
offsetWidth,offsetHight包括边框，clientWidth,clientHight不包括边框（但包括padding）/page-- 模态框拖拽案例----京东淘宝放大镜的案例
南下有你
02-20 545
1.获取鼠标在盒子内的标签- index.html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ ...
精通JavaScript：Web开发者指南（第2版）
7. 第7章阐述了匿名函数，这种函数在JavaScript中常用于闭包和模块化编程。 8. 第8章讲解浏览器对象模型（BOM），它是JavaScript与浏览器交互的基础。 9. 第9章涉及客户端检测，帮助开发者针对不同浏览器进行兼容性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小姚学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值