javaScript交互补充（元素的三大系列）
1、元素的三大系列
1.1、offset系列
1.1.1、offset初相识
使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
- 获得元素距离带有定位祖先元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
offset系列常用属性
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级元素，如果父级没有定位，则返回body |
| element.offsetTop | 返回元素相对于有定位父元素上方的偏移量 |
| element.offsetLeft | 返回元素相对于有定位父元素左方的偏移量 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度、返回数值不带单位 |
1.1.2、offset与style区别
| offset | style |
| offset可以得到任意样式表中的样式值(行内，内部) | style只能得到行内样式表中的样式值 |
| offset系列获得的数值时没有单位的 | style.width获得的是带有单位的字符串 |
| offsetWidth包含padding+border+width | style.width获得不包含padding和border的值 |
| offsetWidth等属性时只读属性，只能获取不能赋值 | style.width是可读写属性，可以获取也可以赋值 |
| 我们想要获取元素大小为止，用offset更合适 | 要给元素更改值，则需要用style改变 |
·····<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;border: 1px solid red;margin: 50px auto;position: relative;}.box1 {width: 100px;height: 100px;background-color: orange;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style></head><body><div class="box"><div class="box1"></div></div><div class="box2" style="width: 50px; height: 50px; background-color: red; border: 10px solid green"></div><script>var box = document.querySelector(".box");var box1 = document.querySelector(".box1");var box2 = document.querySelector(".box2");// 一、 通过offset获取值// 1、获取该元素带有定位的父级元素，如果父级没有定位，则返回body// console.log(box1.offsetParent, "offsetParent");// 2、返回元素相对于定位父元素上方的偏移量// console.log(box1.offsetTop, "offsetTop");// 3、返回元素相对于定位父元素左方的偏移量// console.log(box1.offsetLeft, "offsetLeft");// 4、返回自身的宽度（包括内容区，边框，padding）// console.log(box.offsetWidth, "offsetWidth");// 5、返回自身的高度（包括内容区，边框，padding）// console.log(box.offsetHeight, "offsetHeight");// 二、通过style获取值// 1、style只能获取行内样式表中的样式值// 不包括padding和border// console.log(box2.style.width); //50px//2、 可读可写// box2.style.width = "200px";</script>
·····1.2、client系列
1.2.1、client初相识
使用client系列的相关属性来获取元素可视区的相关信息，可以动态的得到该元素的边框大小，元素大小等
| client系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding，内容区宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding，内容区高度，不含边框，返回数值不带单位 |
<head><meta charset="UTF-8" /><title>client</title><style>.box {width: 100px;height: 100px;background-color: red;border: 10px solid orange;padding: 20px;margin: 100px auto;}</style></head><body><div class="box"></div><script>var box = document.querySelector(".box");// 1、返回元素上边框大小//console.log(box.clientTop); //10// 2、返回元素左边框大小//console.log(box.clientLeft); //10// 3、返回自身的宽度，包括padding，内容区，不含边框// console.log(box.clientWidth); //140// 3、返回自身的高度，包括padding，内容区，不含边框// console.log(box.clientHeight); //140</script></body>1.2.2、client的应用-flexible.js解析
// 立即执行函数 传入window，document参数
(function flexible(window, document) {// 获取html根标签 我们是通过更改html根标签的大小来改变页面大小的var docEl = document.documentElement;// 获取物理像素比，window.devicePixelRatio获取当前的dpr值，如果没有就是1var dpr = window.devicePixelRatio || 1;// adjust body font size//设置body字体大小function setBodyFontSize() {// 如果页面中有body这个元素，就设置body的字体大小if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {// 如果页面中没有body这个元素，则等着我们页面主要dom元素加载完后，设置页面字体大小document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10// 设置html元素的文字大小function setRemUnit() {// 将页面的大小平均划分为10等份，为整个页面的大小// 设置html根字体大小的变化var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resize// 如果页面尺寸大小发生了变化，要重新设置rem大小window.addEventListener("resize", setRemUnit);// pageshow 是我们重新加载页面触发的事件window.addEventListener("pageshow", function (e) {// 如果是从缓存取过来的页面，也需要重新计算rem大小，为了兼容浏览器的if (e.persisted) {setRemUnit();}});// detect 0.5px supports// 有些移动端浏览器不支持0.5像素的写法， 通过一下代码，进行兼容if (dpr >= 2) {// 创建一个假的body元素，用于临时添加测试元素以检测某些样式效果var fakeBody = document.createElement("body");// 创建一个测试用的div元素var testElement = document.createElement("div");// 设置测试元素的边框样式，目的是检测在当前环境下边框的实际渲染高度testElement.style.border = ".5px solid transparent";// 将测试元素添加到假body中fakeBody.appendChild(testElement);// 将假body添加到文档的body元素中，以便在当前页面环境中渲染测试元素docEl.appendChild(fakeBody);// 检测测试元素的渲染高度是否为1，这可以用来判断设备的像素比或浏览器的渲染特性if (testElement.offsetHeight === 1) {// 如果测试元素的高度为1，表明可能存在高像素比屏幕或其他渲染特性// 在这种情况下，为docEl添加类名"hairlines"，以便通过CSS提供更合适的样式docEl.classList.add("hairlines");}// 清理测试元素，移除假body，以避免对页面其他部分造成潜在影响docEl.removeChild(fakeBody);}
})(window, document);
1.3、scroll系列
1.3.1、 scroll初相识
利用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等
| scroll系列属性 | 作用 |
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度（实际内容的宽度），不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度（实际内容的宽度），不含边框，返回数值不带单位 |
<head><meta charset="UTF-8" /><title>scroll</title><style>.box1 {width: 200px;height: 200px;background-color: #bfa;border: 10px solid red;padding: 20px;overflow: auto;}p {width: 400px;height: 400px;background-color: orange;}</style></head><body><div class="box1"><p>其那了，种法苟反作。</p></div><script>var box = document.querySelector(".box1");// 1、返回自身实际的宽度（实际内容的宽度），不含边框，返回数值不带单位// console.log("scrollWidth", box.scrollWidth);// console.log("clientWidth", box.clientWidth);// 2、返回自身实际的高度（实际内容的宽度），不含边框，返回数值不带单位// console.log("scrollHeight", box.scrollHeight);// console.log("clientHeight", box.clientHeight);// 3、返回被卷去的上侧距离，返回数值不带单位// console.log("scrollTop", box.scrollTop);// 4、返回被卷去的左侧距离，返回数值不带单位// console.log("scrollLeft", box.scrollLeft);// 滚动事件触发时，打印被卷去的距离// box.addEventListener("scroll", function () {// console.log("scrollTop", box.scrollTop);// console.log("scrollLeft", box.scrollLeft);// });</script></body>1.4、小结
| 三大系列大小对比 | 作用 |
| element.offsetWidth | 返回自身包括padding，边框，内容区的宽度，返回数值不带单位 |
| element.clientWidth | 返回自身包括padding，内容区宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
offset系列进行用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
sroll经常用于获取滚动距离 scrollTop
事件对象的相关大小：
相关文章：
javaScript交互补充（元素的三大系列）
1、元素的三大系列 1.1、offset系列 1.1.1、offset初相识 使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等 获得元素距离带有定位祖先元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不…...
数据结构（基本概念及顺序表）
基本概念： 1、引入 程序数据结构算法 数据： 数值数据：能够直接参加运算的数据（数值，字符） 非数值数据：不能够直接参加运算的数据（字符串、图片等） 数据即是信息的载…...
【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南
一、CentOS 7下载源 华为源：https://mirrors.huaweicloud.com/centos/7/isos/x86_64/ 阿里云源：centos-vault-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云 百度网盘源：https://pan.baidu.com/s/1MjFPWS2P2pIRMLA2ioDlVg?pwdfudi &…...
html + css 自适应首页布局案例
文章目录 前言一、组成二、代码1. css 样式2. body 内容3.全部整体 三、效果 前言 一个自适应的html布局 一、组成 整体居中，宽度1200px，小屏幕宽度100% 二、代码 1. css 样式 代码如下（示例）： <style>* {…...
时钟之CSS+JS版
写在前面 此版本绘制的时钟基于CSSJS模式。 优点操作简单，缺点当然是不够灵活。下一篇会基于HTML5的canvas标签，使用JS绘制。会更灵活，元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...
ubuntu18.04 配置安卓编译环境
目前有个项目，验收时有个要求是在linux中进行编译打包生成apk文件。我平时都是在windows环境android studio中进行打包的，花了半天时间研究了一下，记录如下： 安装安卓sdk cd /opt wget https://dl.google.com/android/reposito…...
pycharm分支提交操作
一、Pycharm拉取Git远程仓库代码 1、点击VCS > Get from Version Control 2、输入git的url，选择自己的项目路径 3、点击Clone，就拉取成功了 默认签出分支为main 选择develop签出即可进行开发工作 二、创建分支（非必要可以不使用…...
ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15
ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码 ESP32-C3 开发笔记 之 arduino 正常上传程序 但是打开串口,串口快速刷新 芯片一直处于重启状态 找了很久的原因没找到,用Mixly 上传就正常 最后看到这篇 文章https://blog.csdn.net/luooove/article/details/132351398修改了Fl…...
Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真
引言 SLAM（同步定位与地图构建）在Gazebo仿真环境中的应用能够模拟真实机器人进行环境建图和导航。通过SLAM仿真，开发者可以在虚拟环境中测试算法，而不必依赖真实硬件，便于调试与优化。 Gazebo提供了多个虚拟环境&…...
2024年11月15日
1.计算机网络 逻辑右移 做加减法 定点乘法 原码乘法运算 一位乘 计组 2.英语六级...
websocket初始化
websocket初始化 前言 上一集我们HTTP的ping操作就可以跑通了，那么我们还有一个协议---websocket，我们在这一集就要去完成我们websocket的初始化。 分析 我们在初始化websocket的之前，我们考虑一下，我们什么时候就要初始化我们…...
uniapp ios app以framwork形式接入sentry
一、下载Sentry mac终端输入：vim Podfile修改Podfile: platform :ios, 11.0 target YourApp douse_frameworks! # This is importantpod Sentry, :git > https://github.com/getsentry/sentry-cocoa.git, :tag > 8.40.1 end执行：pod install下载…...
⾃动化运维利器Ansible-基础
Ansible基础 一、工作原理二、快速入门2.1 测试所有资产的网络连通性2.2 发布文件到被管理节点(资产) 三、资产(被管理节点)3.1 静态资产3.1.1 自定义资产3.1.2 自定义资产的使用3.1.3 资产选择器 四、Ansible Ad-Hoc 命令4.1 模块类型4.1.1 command & shell 模块4.1.2 cop…...
若依笔记（十一）：芋道多租户限制与修改
目录 多租户实现 哪些表是多租户的？ YudaoTenant自动装载类 租户隔离的sql在哪？ 如何修改成无租户隔离 全局修改 表级别 请求RUL级别 芋道比若依多了租户概念，这也是因为它增加很多业务系统，首先后台管理系统肯定是多租户的，这意味着如商城系统的产品管理SPU、库存…...
hive 统计各项目下排名前5的问题种类
实现指定某项目下的数据效果图如下所示： 其中 ABCDE 为前5名的问题种类，其中A问题有124个（出现了124次） 数据说明： 整个数据集 包含很多项目一个项目 包含很多问题一个问题 选项 可认为是 类别值，所有出…...
HBase 安装与基本操作指南
以下是关于 Apache HBase 安装、配置以及简单操作的详细指南： HBase 简介 Apache HBase 是一个基于 Hadoop 的分布式数据库，擅长处理大规模、结构化的海量数据。它采用行列式存储方式，与 Hadoop 和 HDFS 紧密结合，是支持大数据实…...
Spring Boot应用中的文件压缩与解压技术实践
在构建Spring Boot应用时，文件压缩与解压是处理大量数据、优化存储和传输速度的常用技术。本文旨在深入探讨Spring Boot应用中文件压缩与解压的实现方法，包括常见压缩算法的选择、Spring Boot中的实现策略以及实际应用场景中的最佳实践。 引言 随着大数…...
D69【 python 接口自动化学习】- python 基础之数据库
day69 Python 执行 SQL 语句 学习日期：20241115 学习目标： MySQL 数据库﹣- Python连接redis 学习笔记： redis数据库的用途 使用Python访问redis数据库 使用Python对redis数据库进行读写操作 总结 1. redis是一款高性能的键…...
410. 分割数组的最大值
目录 题目解法 题目 给定一个非负整数数组 nums 和一个整数 k ，你需要将这个数组分成 k 个非空的连续子数组，使得这 k 个子数组各自和的最大值 最小。 返回分割后最小的和的最大值。 子数组 是数组中连续的部份。 解法 int splitArray(vector<in…...
Azure pipeline 通过git命令修改文件
步骤及解释 设置git用户名 git config --global user.email "useremail" git config --global user.name "username" 获取branch $branch "$(Build.SourceBranch)" -replace "refs/heads/" "$(Build.SourceBranch)"&a…...
一行环境变量，给 Claude Code 省下 90% 成本
一行环境变量，给 Claude Code 省下 90% 成本 你以为是模型太贵，其实是缓存“漏风”了 🧊💸最近不少开发者发现一个诡异现象： 用了 Claude Code 接国内模型，比如 DeepSeek、Kimi、智谱 AI 后，突然…...
DP/eDP协议深度解析－－control symbol的插入时机与实现逻辑
1. 深入理解DP/eDP协议中的control symbol 第一次接触DP/eDP协议时，最让我困惑的就是那些神秘的control symbol。它们就像交通信号灯一样，指挥着视频数据的传输流程。简单来说，control symbol是嵌入在视频数据流中的特殊控制字符，…...
基于SpringBoot+Vue的旅游景点攻略与门票预订系统毕业设计
博主介绍：✌ 专注于Java,python,✌关注✌私信我✌具体的问题，我会尽力帮助你。一、研究目的本研究旨在构建一个基于Spring Boot与Vue框架的旅游景点攻略与门票预订系统以解决传统旅游信息管理中存在的数据孤岛现象服务响应滞后问题以及用户体验单一化等核…...
长期项目使用 Taotoken 聚合 API 在模型选型与切换上的便利性体验
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 长期项目使用 Taotoken 聚合 API 在模型选型与切换上的便利性体验 在一个持续数月的研发项目中，我们构建了一个需要集成…...
企业无线网络进阶：FreeRadius服务器配置与TLS证书实战
1. 为什么企业无线网络需要FreeRadius与TLS证书 想象一下你公司的Wi-Fi像是一个没有门禁的公共广场，任何人都能随意进出。这种情况对于企业网络来说简直是灾难——数据泄露、带宽被占、内网渗透风险接踵而至。而FreeRadiusTLS证书的方案，就相当于给这个广…...
Uniapp中处理加密PDF流：从字节数组到本地渲染的完整实践
1. 加密PDF流处理的核心挑战 在Uniapp中处理加密PDF流时，开发者常会遇到几个典型问题。首先是字节流格式混乱，后端可能返回分段加密的二进制数据，前端需要识别数据头标识（如%PDF-1.7）来判断完整性。我曾遇到一个案例&a…...
Graph-CoT：图神经网络结合思维链，实现复杂图结构推理
1. 项目概述：当图神经网络遇上思维链推理最近在复现和优化一些图相关的推理任务时，我反复遇到了一个瓶颈：传统的图神经网络模型在处理需要多步逻辑推理的问题时，比如社交网络中的影响力传播预测、知识图谱上的复杂问答，…...
AI 说错了怎么办——给生成性 Agent 装上 Self-RAG 自审循环
AI 说错了怎么办——给生成性 Agent 装上 Self-RAG 自审循环Agent 早就跑通了，但有一条横切线一直没单独写过：深度阅读那种动辄一千多字的输出，怎么知道 LLM 是不是在自圆其说。这周回过头来补这一篇，顺便把本周做的几个小改动一并…...
智能体状态管理：会话、上下文与检查点
从一个“跑了三天三夜的Agent突然失忆”说起，聊聊状态管理的那些坑先给你讲一个让我头皮发麻的运维事故。 去年冬天，我们做了一个自动爬取竞品价格并生成调价建议的Agent。它跑得很好，连续工作了三天，完成了两万多件商品的价格监控…...
边缘云环境下数据流模型FlowUnits的设计与实践
1. 数据流模型的演进与边缘云挑战数据流计算作为分布式系统领域的核心范式，已经深刻改变了我们处理海量数据的方式。这种基于有向无环图（DAG）的计算模型，通过将数据处理逻辑分解为独立的算子（operator）并明…...