当前位置: 首页 > news >正文

javaScript:DOM中常用尺寸

目录

前言(可以根据图示找到需要的尺寸,便于理解)

内尺寸

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下是htmlbody和html 的offsetParent 都是nulloffsetLeft 指的是 当前元素的左边框距离  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 + 左右paddingscrollHeight 和 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尺寸的情况进行说明。期待您的关注和期待!在文章完成后,我将很高兴为您提供反馈或帮助。谢谢!

相关文章:

javaScript:DOM中常用尺寸

目录 前言&#xff08;可以根据图示找到需要的尺寸&#xff0c;便于理解&#xff09; 内尺寸 clientWidth 包含左右padding和宽度width&#xff08;忽略滚动条的宽度&#xff09; clientHeight 包含上下padding和height&#xff08;忽略滚动条的高度&#xff09; clientTo…...

决策树算法学习笔记

一、决策树简介 首先决策树是一种有监督的机器学习算法&#xff0c;其采用的方法是自顶向下的递归方法&#xff0c;构建一颗树状结构的树&#xff0c;其具有分类和预测功能。其基本思想是以信息熵为度量构造一棵熵值下降最快的树&#xff0c;到叶子节点处的熵值为零。决策树的构…...

Verilog_mode常用的几个用法

一&#xff1a;verilog mode中如何使用正则表达 在顶层实例化时&#xff0c;有大量的信号需要重新命名&#xff0c;使用模板的话会增加大量的注释内容&#xff0c;不过往往这些信号命名有特定的规律&#xff0c;我们可以使用正则表达式来处理&#xff0c;下面举几个例子&#…...

MySQL之MHA高可用配置及故障切换

目录 一、MHA概念 1、MHA的组成 2、MHA的特点 3、主从复制有多少种复制方法 二、搭建MySqlMHA部署 1&#xff0e;Master、Slave1、Slave2 节点上安装 mysql 2&#xff0e;修改 Master、Slave1、Slave2 节点的 Mysql主配置文件/etc/my.cnf 3. 配置 mysql 一主两从 4、安…...

java实现状态模式

状态模式是一种行为设计模式&#xff0c;它允许对象在内部状态改变时改变其行为。在状态模式中&#xff0c;对象将其行为委托给表示不同状态的状态对象&#xff0c;这些状态对象负责管理其行为。以下是在 Java 中实现状态模式的一般步骤&#xff1a; 创建一个状态接口&#xff…...

Selling a Menagerie(cf)

该题考察了拓扑排序dfs 题意&#xff1a;你是一个动物园的主人&#xff0c;该动物园由编号从1到n的n只动物组成。然而&#xff0c;维护动物园是相当昂贵的&#xff0c;所以你决定卖掉它&#xff01;众所周知&#xff0c;每种动物都害怕另一种动物。更确切地说&#xff0c;动物…...

python-55-打包exe执行

目录 前言一、pyinstaller二、实践打包exe1、遇坑1&#xff1a;Plugin already registered2、遇坑2&#xff1a;OSError 句柄无效 三、总结 前言 你是否有这种烦恼&#xff1f; 别人在使用你的项目时可能还需要安装各种依赖包&#xff1f;别人在使用你的项目&#xff0c;可能…...

linux并发服务器 —— IO多路复用(八)

半关闭、端口复用 半关闭只能实现数据单方向的传输&#xff1b;当TCP 接中A向 B 发送 FIN 请求关闭&#xff0c;另一端 B 回应ACK 之后 (A 端进入 FIN_WAIT_2 状态)&#xff0c;并没有立即发送 FIN 给 A&#xff0c;A 方处于半连接状态 (半开关)&#xff0c;此时 A 可以接收 B…...

企微SCRM营销平台MarketGo-ChatGPT助力私域运营

一、前言 ChatGPT是由OpenAI&#xff08;开放人工智能&#xff09;研发的自然语言处理模型&#xff0c;其全称为"Conversational Generative Pre-trained Transformer"&#xff0c;即对话式预训练转换器。它是GPT系列模型的最新版本&#xff0c;GPT全称为"Gene…...

linux C++ 海康截图Demo

项目结构 CMakeLists.txt cmake_minimum_required(VERSION 3.7)project(CapPictureTest)include_directories(include)link_directories(${CMAKE_SOURCE_DIR}/lib ${CMAKE_SOURCE_DIR}/lib/HCNetSDKCom) add_executable(CapPictureTest ${CMAKE_SOURCE_DIR}/src/CapPictureTes…...

MySQL的事务隔离级别

目录 事务隔离级别的概念 脏读&#xff08;Dirty Read&#xff09;&#xff1a; 不可重复读&#xff08;Non-Repeatable Read&#xff09;&#xff1a; 幻读&#xff08;Phantom Read&#xff09;&#xff1a; 读未提交&#xff08;Read Uncommitted&#xff09; 读未提交…...

企业大语言模型智能问答的底层基础数据知识库如何搭建?

企业大语言模型智能问答的底层基础数据知识库搭建是一个复杂而关键的过程。下面将详细介绍如何搭建这样一个知识库。 确定知识库的范围和目标&#xff1a; 首先&#xff0c;需要明确知识库的范围&#xff0c;确定所涵盖的领域和主题。这可以根据企业的业务领域和用户需求来确…...

【腾讯云 Cloud Studio 实战训练营】使用python爬虫和数据可视化对比“泸州老窖和五粮液4年内股票变化”

Cloud Studio 简介 Cloud Studio是腾讯云发布的云端开发者工具&#xff0c;支持开发者利用Web IDE&#xff08;集成开发环境&#xff09;&#xff0c;实现远程协作开发和应用部署。 现在的Cloud Studio已经全面支持Java Spring Boot、Python、Node.js等多种开发模板示例库&am…...

Linux之Shell概述

目录 Linux之Shell概述 学习shell的原因 shell是什么 shell起源 查看当前系统支持的shell 查看当前系统默认shell Shell 概念 Shell 程序设计语言 Shell 也是一种脚本语言 用途 Shell脚本的基本元素 基本元素构成&#xff1a; Shell脚本中的注释和风格 Shell脚本编…...

手写Spring:第2章-创建简单的Bean容器

文章目录 一、目标&#xff1a;创建简单的Bean容器二、设计&#xff1a;创建简单的Bean容器三、实现&#xff1a;创建简单的Bean容器3.0 引入依赖3.1 工程结构3.2 创建简单Bean容器类图3.3 Bean定义3.4 Bean工厂 四、测试&#xff1a;创建简单的Bean容器4.1 用户Bean对象4.2 单…...

在Windows上通过SSH公私钥实现无密码登录Linux

在Windows上通过SSH公私钥实现无密码登录Linux 在Windows上生成SSH密钥对&#xff1a; 打开命令提示符或PowerShell窗口。 输入以下命令生成SSH密钥对&#xff1a; ssh-keygen -t rsa -b 4096按照提示输入密钥的保存路径和密码&#xff08;可选&#xff09;。 在指定的路径下…...

使用ppt和texlive生成eps图片(高清、可插入latex论文)

一、说明 写论文经常需要生成高清的图片插入到论文中&#xff0c;本文以ppt画图生成高质量的eps图片的实现来介绍具体操作方法。关于为什么要生成eps图片&#xff0c;一个是期刊要求&#xff08;也有不要求的&#xff09;&#xff0c;另一个是显示图像的质量高。 转化获得eps…...

html5学习笔记19-SSE服务器发送事件(Server-Sent Events)

https://www.runoob.com/html/html5-serversentevents.html 允许网页获得来自服务器的更新。类似设置回调函数。 if(typeof(EventSource)!"undefined"){var sourcenew EventSource("demo_sse.php");source.onmessagefunction(event){document.getElement…...

高效数据湖构建与数据仓库融合:大规模数据架构最佳实践

文章目录 数据湖和数据仓库&#xff1a;两大不同理念数据湖数据仓库 数据湖与数据仓库的融合统一数据目录数据清洗和转换数据安全和权限控制数据分析和可视化 数据湖与数据仓库融合的优势未来趋势云原生数据湖自动化数据处理边缘计算与数据湖融合 结论 &#x1f389;欢迎来到云…...

Java学习笔记——35多线程02

线程同步 线程同步卖票案例同步代码块同步方法块 线程安全的类StringBufferVectorHashtable Lock锁 线程同步 卖票案例 public class SellTicket implements Runnable{private int tickets10;Overridepublic void run(){while (true){if(tickets>0){System.out.println(Th…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...