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

scroll、offset、client三大家族和getBoundingClientRect方法

news 2025/9/26 12:31:07

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(只能读,不能修改&#xff09;2.client(只能读,不能修改&#xff09;3.scroll滚动家族4.getBoundingClientRect方法 1.offset(只能读,不能修改&#xff09; offsetParent:离当前元素最近的有定位的祖先元素…...

编程日记 2025/2/20 10:11:48

JWT 令牌

目录 一、JWT 1、什么是JWT 2、JWT的组成 3、JJWT签发与验证token 1、创建token 2、解析token 3、设置过期时间 4、自定义claims 前言&#xff1a; 在现代Web应用和微服务架构中&#xff0c;用户身份验证和信息安全传输是核心问题。JSON Web Token&#xff08;J…...

编程日记 2025/2/20 10:08:44

Python基于Flask的豆瓣Top250电影数据可视化分析与评分预测系统（附源码，技术说明）

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…...

编程日记 2025/2/20 10:07:42

JavaScript数组-遍历数组

在JavaScript中&#xff0c;数组是一种非常常用的数据结构&#xff0c;用于存储一系列有序的数据项。无论是处理简单的列表还是复杂的数据集合&#xff0c;遍历数组都是我们经常需要执行的操作之一。本文将详细介绍几种常见的遍历数组的方法&#xff0c;并讨论它们各自的优缺点…...

编程日记 2025/2/20 10:06:41

基于Flask的第七次人口普查数据分析系统的设计与实现

【Flask】基于Flask的第七次人口普查数据分析系统的设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 基于Flask的人口普查可视化分析系统 二、项目界面展示 登录/注册 首页/详情 …...

编程日记 2025/2/20 10:05:40

解决DeepSeek服务器繁忙的有效方法

全球42%的企业遭遇过AI工具服务器过载导致内容生产中断&#xff08;数据来源&#xff1a;Gartner 2025&#xff09;。当竞品在凌晨3点自动发布「智能家居安装指南」时&#xff0c;你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…...

编程日记 2025/2/20 10:02:35

分词器(Tokenizer) | 有了分词器，为什么还需要嵌入模型

文章目录 什么是tokenizer有了分词器&#xff0c;为什么还需要嵌入模型分词器为什么在transformers 里Hugging Face的Tokenizer大模型不同tokenizer训练效果对比分词器库选择当前顶尖大模型所采用的 Tokenizer 方法与词典大小 参考 什么是tokenizer Tokenizers huggingface官方…...

编程日记 2025/2/20 10:00:30

VisionTransformer（ViT）与CNN卷积神经网络的对比

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/2/20 9:59:29

计算机视觉+Numpy和OpenCV入门

Day 1&#xff1a;Python基础Numpy和OpenCV入门 Python基础 变量与数据类型、函数与类的定义、列表与字典操作文件读写操作&#xff08;读写图像和数据文件&#xff09; 练习任务&#xff1a;写一个Python脚本&#xff0c;读取一个图像并保存灰度图像。 import cv2 img cv2.im…...

编程日记 2025/2/20 9:58:27

Vue 3 工程化打包工具：从理论到实践 （下篇）

引言 在前端开发中&#xff0c;打包工具是工程化的重要组成部分。Vue 3 作为当前流行的前端框架&#xff0c;其工程化离不开高效的打包工具。打包工具不仅能够将代码、样式、图片等资源进行优化和压缩&#xff0c;还能通过模块化、代码分割等功能提升应用的性能。本文将深入探…...

编程日记 2025/2/20 9:57:25

java经验快速学习python！

title: java经验快速学习python&#xff01; date: 2025-02-19 01:52:05 tags: python学习路线 java经验快速学习python&#xff01; 本篇文档会一直更新&#xff01;&#xff01;&#xff01;变量、分支结构、循环结构、数据结构【列表、元组、集合字典】python常用内置函数元…...

编程日记 2025/2/20 9:55:22

爬虫破解网页禁止F12

右击页面显示如下 先点击f12再输入网址&#xff0c;回车后没有加载任何数据 目前的一种解决方法&#xff1a; 先 AltD &#xff0c;再 CtrlShifti...

编程日记 2025/2/20 9:54:19

从零开始构建一个语言模型中vocab_size（词汇表大小）的设定规则

从零开始构建一个语言模型就要设计一个模型框架，其中要配置很多参数。在自然语言处理任务中，vocab_size（词汇表大小） 的设定是模型设计的关键参数之一，它直接影响模型的输入输出结构、计算效率和内存消耗。 本文是在我前文的基础上讲解的：从零开始构建一个小型字符级语言…...

编程日记 2025/2/20 9:45:07

Jenkins插件管理切换国内源地址

安装Jenkins 插件时&#xff0c;由于访问不了国外的插件地址&#xff0c;会导致基本插件都安装失败。 不用着急&#xff0c;等全部安装失败后&#xff0c;进入系统&#xff0c;修改插件源地址&#xff0c;重启后在安装所需插件。 替换国内插件更新地址 选择&#xff1a;系统…...

编程日记 2025/2/20 9:43:04

Q - learning 算法是什么

Q - learning 算法是什么 Q - learning 算法是一种经典的无模型强化学习算法，由克里斯沃特金斯（Chris Watkins）在 1989 年提出。它被广泛应用于解决各种决策问题，尤其适用于智能体在环境中通过与环境交互来学习最优策略的场景。下面从基本概念、核心公式、算法流程和特点几…...

编程日记 2025/2/20 9:42:03

nasm - console 32bits

文章目录 nasm - console 32bits概述笔记my_build.batnasm_main.asm用VS2019写个程序&#xff0c;按照win32方式编译&#xff0c;比较一下。备注END nasm - console 32bits 概述 看到一个nasm的例子(用nasm实现一个32bits控制台的程序架子) 学习一下 笔记 my_build.bat ec…...

编程日记 2025/2/20 9:41:02

11.编写前端内容|vscode链接Linux|html|css|js(C++)

vscode链接服务器 安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入 打开配置文件&#xff0c;已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …...

编程日记 2025/2/20 9:37:58

【deepseek-r1模型】linux部署deepseek

1、快速安装 Ollama 下载&#xff1a;Download Ollama on macOS Ollama 官方主页&#xff1a;https://ollama.com Ollama 官方 GitHub 源代码仓库&#xff1a;https://github.com/ollama/ollama/ 官网提供了一条命令行快速安装的方法。 &#xff08;1&#xff09;下载Olla…...

编程日记 2025/2/20 9:35:56

【Github每日推荐】-- 2024 年项目汇总

1、AI 技术 项目简述OmniParser一款基于纯视觉的 GUI 智能体&#xff0c;能够准确识别界面上可交互图标以及理解截图中各元素语义&#xff0c;实现自动化界面交互场景&#xff0c;如自动化测试、自动化操作等。ChatTTS一款专门为对话场景设计的语音生成模型&#xff0c;主要用…...

编程日记 2025/2/20 9:34:54

C++中的.*运算符

看运算符重载的时候&#xff0c;看到这一句 .* :: sizeof ?: . 注意以上5个运算符不能重载。 :: sizeof ?: . 这四个好理解&#xff0c;毕竟都学过&#xff0c;但.*是什么&#xff1f; 于是自己整理了一下 .* 是一种 C 中的运算符&#xff0c;称为指针到成…...

编程日记 2025/2/20 9:30:50

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进…...

编程新知 2025/9/25 21:49:44

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/26 6:30:42

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/9/26 6:59:23

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/9/24 22:50:47

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/9/25 3:43:48