scroll、offset、client三大家族和getBoundingClientRect方法
scroll、offset、client三大家族和getBoundingClientRect方法
- 1.offset(只能读,不能修改)
- 2.client(只能读,不能修改)
- 3.scroll滚动家族
- 4.getBoundingClientRect方法
1.offset(只能读,不能修改)
offsetParent:离当前元素最近的有定位的祖先元素offsetLeft:当前元素的左边框到offsetParent元素的左边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetLeft不包含offsetParent元素左边框的宽度。offsetTop:当前元素的上边框到offsetParent元素的上边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetTop不包含offsetParent元素上边框的宽度。offsetWidth/offsetHeight:
如果当前元素的box-sizing属性是border-box时,offsetWidth/offsetHeight就是该元素的width和height。
如果当前元素的box-sizing属性是content-box时,offsetWidth/offsetHeight就是该元素的width、padding和border之和。
下面来看一个例子:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷,但只是界面会受影响,对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 20px solid green;background-color: hotpink;overflow-y: auto;//box-sizing: border-box;}</style></head><body><div class="root"><div class="box"><div class="small"></div></div></div></body>
</html>
界面如下:

如上,有三个div。root是最大的div,box是中等的div,small是最小的div(有一个绿色边框)。我们下面来分析一下small这个小div的offsetParent、offsetHeight、offsetLeft分别是什么?
<script>let element = document.querySelector(".small");//small的box-sizing属性是content-box时候,打印180(100+20*2+20*2);//small的box-sizing属性是border-box时候,打印100console.log(element.offsetHeight);console.log(element.offsetLeft); //50+10=60;console.log(element.offsetParent); //root元素</script>
2.client(只能读,不能修改)
clientWidth
width+paddingLeft+padingRight(不含边框)clientHeight
width+paddingTop+padingBottom(不含边框)clientLeft:左边框大小clientTop:上边框大小
<head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷,但只是界面会受影响,对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 16px solid green;background-color: hotpink;overflow-y: auto;/* box-sizing: border-box; */}</style></head><body><div class="root"><div class="box"><div class="small"></div></div></div><script>let element = document.querySelector(".small");//small的box-sizing属性是content-box时候,打印140(100+20*2);//small的box-sizing属性是border-box时候,打印68(100-16*2)console.log(element.clientHeight); console.log(element.clientLeft); //为16px 左border宽</script></body>
3.scroll滚动家族
scrollWidth元素总宽度(包含由于溢出无法在网页上显示的区域,内容区和内边距,不含边框)scrollHeight元素总高度(包含由于溢出无法在网页上显示的区域,内容区和内边距,不含边框)scrollLeft(可读写)
表示当前元素的水平滚动条向右侧滚动的像素数量scrollTop元素上面被卷起的高度(可读写)
表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素,这两个属性总是等于0。
下面举一个例子:
<head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷,但只是界面会受影响,对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px; border: 16px solid green;background-color: hotpink; overflow-y: auto;}</style></head><body><div class="root"><div class="box"><div class="small"><div style="height: 500px; width: 100%"></div></div></div></div></body>
界面如下:

如上,有三个div。root是最大的div,box是中等的div,small是有一个绿色边框的div,它内部有一个500px高度的div,所以会出现纵向滚动条。我们下面来分析一下下面的代码:
<script>let element = document.querySelector(".small");// 获取盒子的高度宽度,包括内容区、内边距、不包含边框(包含滚动高度)//500+20*2,打印540,其中20是padding,而不是borderconsole.log(element.scrollHeight); element.addEventListener("scroll", function () {console.log(element.scrollTop);//判断滚动条是否滚动到底了//clientHeight不包含边框if (element.scrollHeight - (element.clientHeight + element.scrollTop) <1) {console.log("滚动条到底了");}});</script>
4.getBoundingClientRect方法
getBoundingClientRect()获取元素位置(全部为只读)。
x:元素左上角相对于视口的横坐标y:元素左上角相对于视口的纵坐标height:元素高度width:元素宽度left:元素左上角相对于视口的横坐标,与x属性相等right:元素右边界相对于左边视口的横坐标(等于x + width)top:元素顶部相对于视口的纵坐标,与y属性相等bottom:元素底部相对于上边视口的纵坐标(等于y + height)
如下代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body,html {margin: 0;padding: 0;background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 16px solid green;background-color: hotpink;overflow-y: auto;}</style></head><body><div class="root"><div class="box"><div class="small"><div style="height: 500px; width: 100%"></div></div></div></div><script>let element = document.querySelector(".small");//元素左上角相对于视口的横坐标 160console.log(element.getBoundingClientRect().x); //元素左上角相对于视口的纵坐标 150console.log(element.getBoundingClientRect().y); //small的box-sizing属性是content-box时候,打印172(100+20*2+16*2);//small的box-sizing属性是border-box时候,打印100console.log(element.getBoundingClientRect().height);//160,元素左上角相对于视口的横坐标,与`x`属性相等console.log(element.getBoundingClientRect().left); //元素右边界相对于左边视口的横坐标(等于`x + width`)//small的box-sizing属性是content-box时候,打印332(160+172);//small的box-sizing属性是border-box时候,打印260(160+100)console.log(element.getBoundingClientRect().right); </script></body>
</html>
相关文章:
scroll、offset、client三大家族和getBoundingClientRect方法
scroll、offset、client三大家族和getBoundingClientRect方法 1.offset(只能读,不能修改)2.client(只能读,不能修改)3.scroll滚动家族4.getBoundingClientRect方法 1.offset(只能读,不能修改) offsetParent:离当前元素最近的有定位的祖先元素…...
JWT 令牌
目录 一、JWT 1、什么是JWT 2、JWT的组成 3、JJWT签发与验证token 1、创建token 2、解析token 3、设置过期时间 4、自定义claims 前言: 在现代Web应用和微服务架构中,用户身份验证和信息安全传输是核心问题。JSON Web Token(J…...
Python基于Flask的豆瓣Top250电影数据可视化分析与评分预测系统(附源码,技术说明)
博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇dz…...
JavaScript数组-遍历数组
在JavaScript中,数组是一种非常常用的数据结构,用于存储一系列有序的数据项。无论是处理简单的列表还是复杂的数据集合,遍历数组都是我们经常需要执行的操作之一。本文将详细介绍几种常见的遍历数组的方法,并讨论它们各自的优缺点…...
基于Flask的第七次人口普查数据分析系统的设计与实现
【Flask】基于Flask的第七次人口普查数据分析系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 基于Flask的人口普查可视化分析系统 二、项目界面展示 登录/注册 首页/详情 …...
解决DeepSeek服务器繁忙的有效方法
全球42%的企业遭遇过AI工具服务器过载导致内容生产中断(数据来源:Gartner 2025)。当竞品在凌晨3点自动发布「智能家居安装指南」时,你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…...
分词器(Tokenizer) | 有了分词器,为什么还需要嵌入模型
文章目录 什么是tokenizer有了分词器,为什么还需要嵌入模型分词器为什么在transformers 里Hugging Face的Tokenizer大模型不同tokenizer训练效果对比分词器库选择当前顶尖大模型所采用的 Tokenizer 方法与词典大小 参考 什么是tokenizer Tokenizers huggingface官方…...
VisionTransformer(ViT)与CNN卷积神经网络的对比
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
计算机视觉+Numpy和OpenCV入门
Day 1:Python基础Numpy和OpenCV入门 Python基础 变量与数据类型、函数与类的定义、列表与字典操作文件读写操作(读写图像和数据文件) 练习任务:写一个Python脚本,读取一个图像并保存灰度图像。 import cv2 img cv2.im…...
Vue 3 工程化打包工具:从理论到实践 (下篇)
引言 在前端开发中,打包工具是工程化的重要组成部分。Vue 3 作为当前流行的前端框架,其工程化离不开高效的打包工具。打包工具不仅能够将代码、样式、图片等资源进行优化和压缩,还能通过模块化、代码分割等功能提升应用的性能。本文将深入探…...
java经验快速学习python!
title: java经验快速学习python! date: 2025-02-19 01:52:05 tags: python学习路线 java经验快速学习python! 本篇文档会一直更新!!!变量、分支结构、循环结构、数据结构【列表、元组、集合字典】python常用内置函数元…...
爬虫破解网页禁止F12
右击页面显示如下 先点击f12再输入网址,回车后没有加载任何数据 目前的一种解决方法: 先 AltD ,再 CtrlShifti...
从零开始构建一个语言模型中vocab_size(词汇表大小)的设定规则
从零开始构建一个语言模型就要设计一个模型框架,其中要配置很多参数。在自然语言处理任务中,vocab_size(词汇表大小) 的设定是模型设计的关键参数之一,它直接影响模型的输入输出结构、计算效率和内存消耗。 本文是在我前文的基础上讲解的:从零开始构建一个小型字符级语言…...
Jenkins插件管理切换国内源地址
安装Jenkins 插件时,由于访问不了国外的插件地址,会导致基本插件都安装失败。 不用着急,等全部安装失败后,进入系统,修改插件源地址,重启后在安装所需插件。 替换国内插件更新地址 选择:系统…...
Q - learning 算法是什么
Q - learning 算法是什么 Q - learning 算法是一种经典的无模型强化学习算法,由克里斯沃特金斯(Chris Watkins)在 1989 年提出。它被广泛应用于解决各种决策问题,尤其适用于智能体在环境中通过与环境交互来学习最优策略的场景。下面从基本概念、核心公式、算法流程和特点几…...
nasm - console 32bits
文章目录 nasm - console 32bits概述笔记my_build.batnasm_main.asm用VS2019写个程序,按照win32方式编译,比较一下。备注END nasm - console 32bits 概述 看到一个nasm的例子(用nasm实现一个32bits控制台的程序架子) 学习一下 笔记 my_build.bat ec…...
11.编写前端内容|vscode链接Linux|html|css|js(C++)
vscode链接服务器 安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入 打开配置文件,已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …...
【deepseek-r1模型】linux部署deepseek
1、快速安装 Ollama 下载:Download Ollama on macOS Ollama 官方主页:https://ollama.com Ollama 官方 GitHub 源代码仓库:https://github.com/ollama/ollama/ 官网提供了一条命令行快速安装的方法。 (1)下载Olla…...
【Github每日推荐】-- 2024 年项目汇总
1、AI 技术 项目简述OmniParser一款基于纯视觉的 GUI 智能体,能够准确识别界面上可交互图标以及理解截图中各元素语义,实现自动化界面交互场景,如自动化测试、自动化操作等。ChatTTS一款专门为对话场景设计的语音生成模型,主要用…...
C++中的.*运算符
看运算符重载的时候,看到这一句 .* :: sizeof ?: . 注意以上5个运算符不能重载。 :: sizeof ?: . 这四个好理解,毕竟都学过,但.*是什么? 于是自己整理了一下 .* 是一种 C 中的运算符,称为指针到成…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
Tauri2学习笔记
教程地址:https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引:https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多,我按照Tauri1的教程来学习&…...
