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

javaScript交互补充（元素的三大系列）

news 2026/3/31 4:40:12

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

返回自身实际的高度（实际内容的宽度），不含边框，返回数值不带单位

image.png

  <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系列相关属性可以动态的得到该元素的位置&#xff08;偏移&#xff09;、大小等 获得元素距离带有定位祖先元素的位置获得元素自身的大小&#xff08;宽度高度&#xff09;注意&#xff1a;返回的数值都不…...

编程日记 2024/11/16 18:35:00

数据结构（基本概念及顺序表）

基本概念&#xff1a; 1、引入 程序数据结构算法 数据&#xff1a; 数值数据&#xff1a;能够直接参加运算的数据&#xff08;数值&#xff0c;字符&#xff09; 非数值数据&#xff1a;不能够直接参加运算的数据&#xff08;字符串、图片等&#xff09; 数据即是信息的载…...

编程日记 2024/11/16 18:32:57

【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南

一、CentOS 7下载源 华为源&#xff1a;https://mirrors.huaweicloud.com/centos/7/isos/x86_64/ 阿里云源&#xff1a;centos-vault-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云 百度网盘源&#xff1a;https://pan.baidu.com/s/1MjFPWS2P2pIRMLA2ioDlVg?pwdfudi &…...

编程日记 2024/11/16 18:28:50

html + css 自适应首页布局案例

文章目录 前言一、组成二、代码1. css 样式2. body 内容3.全部整体 三、效果 前言 一个自适应的html布局 一、组成 整体居中&#xff0c;宽度1200px&#xff0c;小屏幕宽度100% 二、代码 1. css 样式 代码如下&#xff08;示例&#xff09;&#xff1a; <style>* {…...

编程日记 2024/11/16 18:27:47

时钟之CSS+JS版

写在前面 此版本绘制的时钟基于CSSJS模式。 优点操作简单&#xff0c;缺点当然是不够灵活。下一篇会基于HTML5的canvas标签&#xff0c;使用JS绘制。会更灵活&#xff0c;元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...

编程日记 2024/11/16 18:23:44

ubuntu18.04 配置安卓编译环境

目前有个项目&#xff0c;验收时有个要求是在linux中进行编译打包生成apk文件。我平时都是在windows环境android studio中进行打包的&#xff0c;花了半天时间研究了一下&#xff0c;记录如下&#xff1a; 安装安卓sdk cd /opt wget https://dl.google.com/android/reposito…...

编程日记 2024/11/16 18:20:40

pycharm分支提交操作

一、Pycharm拉取Git远程仓库代码 1、点击VCS > Get from Version Control 2、输入git的url&#xff0c;选择自己的项目路径 3、点击Clone&#xff0c;就拉取成功了 默认签出分支为main 选择develop签出即可进行开发工作 二、创建分支&#xff08;非必要可以不使用&#xf…...

编程日记 2024/11/16 18:19:38

ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15

ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码 ESP32-C3 开发笔记 之 arduino 正常上传程序 但是打开串口,串口快速刷新 芯片一直处于重启状态 找了很久的原因没找到,用Mixly 上传就正常 最后看到这篇 文章https://blog.csdn.net/luooove/article/details/132351398修改了Fl…...

编程日记 2024/11/16 18:10:28

Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真

引言 SLAM&#xff08;同步定位与地图构建&#xff09;在Gazebo仿真环境中的应用能够模拟真实机器人进行环境建图和导航。通过SLAM仿真&#xff0c;开发者可以在虚拟环境中测试算法&#xff0c;而不必依赖真实硬件&#xff0c;便于调试与优化。 Gazebo提供了多个虚拟环境&…...

编程日记 2024/11/16 18:09:26

2024年11月15日

1.计算机网络 逻辑右移 做加减法 定点乘法 原码乘法运算 一位乘 计组 2.英语六级...

编程日记 2024/11/16 18:07:23

websocket初始化

websocket初始化 前言 上一集我们HTTP的ping操作就可以跑通了&#xff0c;那么我们还有一个协议---websocket&#xff0c;我们在这一集就要去完成我们websocket的初始化。 分析 我们在初始化websocket的之前&#xff0c;我们考虑一下&#xff0c;我们什么时候就要初始化我们…...

编程日记 2024/11/16 18:05:21

uniapp ios app以framwork形式接入sentry

一、下载Sentry mac终端输入&#xff1a;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执行&#xff1a;pod install下载…...

编程日记 2024/11/16 18:02:19

⾃动化运维利器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…...

编程日记 2024/11/16 17:59:16

若依笔记（十一）：芋道多租户限制与修改

目录 多租户实现 哪些表是多租户的？ YudaoTenant自动装载类 租户隔离的sql在哪？ 如何修改成无租户隔离 全局修改 表级别 请求RUL级别 芋道比若依多了租户概念，这也是因为它增加很多业务系统，首先后台管理系统肯定是多租户的，这意味着如商城系统的产品管理SPU、库存…...

编程日记 2024/11/16 17:58:14

hive 统计各项目下排名前5的问题种类

实现指定某项目下的数据效果图如下所示&#xff1a; 其中 ABCDE 为前5名的问题种类&#xff0c;其中A问题有124个&#xff08;出现了124次&#xff09; 数据说明&#xff1a; 整个数据集 包含很多项目一个项目 包含很多问题一个问题 选项 可认为是 类别值&#xff0c;所有出…...

编程日记 2024/11/16 17:57:12

HBase 安装与基本操作指南

以下是关于 Apache HBase 安装、配置以及简单操作的详细指南&#xff1a; HBase 简介 Apache HBase 是一个基于 Hadoop 的分布式数据库&#xff0c;擅长处理大规模、结构化的海量数据。它采用行列式存储方式&#xff0c;与 Hadoop 和 HDFS 紧密结合&#xff0c;是支持大数据实…...

编程日记 2024/11/16 17:55:09

Spring Boot应用中的文件压缩与解压技术实践

在构建Spring Boot应用时&#xff0c;文件压缩与解压是处理大量数据、优化存储和传输速度的常用技术。本文旨在深入探讨Spring Boot应用中文件压缩与解压的实现方法&#xff0c;包括常见压缩算法的选择、Spring Boot中的实现策略以及实际应用场景中的最佳实践。 引言 随着大数…...

编程日记 2024/11/16 17:54:08

D69【 python 接口自动化学习】- python 基础之数据库

day69 Python 执行 SQL 语句 学习日期&#xff1a;20241115 学习目标&#xff1a; MySQL 数据库&#xfe63;- Python连接redis 学习笔记&#xff1a; redis数据库的用途 使用Python访问redis数据库 使用Python对redis数据库进行读写操作 总结 1. redis是一款高性能的键…...

编程日记 2024/11/16 17:53:07

410. 分割数组的最大值

目录 题目解法 题目 给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k 个非空的连续子数组&#xff0c;使得这 k 个子数组各自和的最大值 最小。 返回分割后最小的和的最大值。 子数组 是数组中连续的部份。 解法 int splitArray(vector<in…...

编程日记 2024/11/16 17:51:05

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

编程日记 2024/11/16 17:50:02

3大突破策略：Bypass Paywalls Clean 2024全场景应用指南

3大突破策略&#xff1a;Bypass Paywalls Clean 2024全场景应用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;付费墙已成为知识获取的主要障碍…...

编程新知 2026/3/31 3:46:47

zh3100组合式选粉机的设计【说明书+27张CAD图纸】

zh3100组合式选粉机作为粉体分级领域的核心设备&#xff0c;其设计融合了流体力学、机械传动与颗粒分离理论&#xff0c;通过优化结构参数与气固两相流场分布&#xff0c;实现高精度、低能耗的粉体分级作业。该设备采用模块化组合设计理念&#xff0c;将选粉室、导流装置、分级…...

编程新知 2026/3/31 3:42:41

DirectX兼容性解决方案：让经典游戏在Windows 10重获新生

DirectX兼容性解决方案&#xff1a;让经典游戏在Windows 10重获新生 【免费下载链接】dxwrapper Fixes compatibility issues with older games running on Windows 10 by wrapping DirectX dlls. Also allows loading custom libraries with the file extension .asi into gam…...

编程新知 2026/3/31 2:40:04

记一次攻防演练复盘（蓝队）

事件&#xff1a;某省大数据局主导的一次攻防演练中午时段遭受大量攻击。 告警信息&#xff08;TOP 5&#xff09;&#xff1a;[疑似目录穿越攻击URI] [漏洞攻击: Apache log4j RCE Attempt (http ldap) (CVE-2021-44228)] [web路径遍历漏洞攻击-Linux环境] [XSS跨站脚本攻击U…...

编程新知 2026/3/31 1:49:17

AsyncServoLib：嵌入式非阻塞舵机控制库详解

1. AsyncServoLib&#xff1a;面向嵌入式实时系统的非阻塞舵机控制库深度解析1.1 设计动机与工程痛点在基于Arduino或兼容MCU&#xff08;如STM32F103、ESP32&#xff09;的机器人、云台、机械臂等实时控制系统中&#xff0c;舵机&#xff08;Servo&#xff09;的精确运动控制是…...

编程新知 2026/3/31 1:41:15

基于中点电位平衡的光伏NPC三电平逆变器并网仿真研究：额定功率100kW、直流电压750V的M...

光伏NPC三电平逆变并网仿真 [1]包含中点电位平衡&#xff0c;额定功率100kW&#xff0c;直流电压750V。 光伏阵列参数已设定&#xff0c;采用mppt算法&#xff08;扰动观察法&#xff09;&#xff1b; [2]主电路采用二极管钳位型NPC逆变器&#xff1b; 采用电压电流双闭环控制&…...

编程新知 2026/3/31 1:15:05

TIA Portal精智面板动画外观实战：从基础图形到变量控制

1. 精智面板动画外观入门指南 第一次接触TIA Portal的精智面板动画功能时&#xff0c;我被它强大的可视化能力惊艳到了。简单拖拽几个图形&#xff0c;关联PLC变量&#xff0c;就能实现酷炫的工业界面效果。下面我就用最直白的语言&#xff0c;带大家从零开始玩转这个功能。 首…...

编程新知 2026/3/30 23:49:12

Abaqus纤维复合材料三点弯曲力学仿真全解析

Abaqus纤维复合材料三点弯曲力学仿真&#xff08;vumat子程序inp文件obd文件视频文件快速建模软件&#xff09;在材料力学的研究领域&#xff0c;纤维复合材料凭借其优异的性能被广泛应用。而通过Abaqus进行三点弯曲力学仿真&#xff0c;能有效探究其力学特性。今天咱就来唠唠这…...

编程新知 2026/3/30 23:25:02

Legacy-iOS-Kit系统降级全指南：让老旧iOS设备重获新生

Legacy-iOS-Kit系统降级全指南&#xff1a;让老旧iOS设备重获新生 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 一、问…...

编程新知 2026/3/30 22:46:02

BALM2深度解析 | 港大MARS实验室如何用点簇革新激光BA？

1. 激光BA的痛点与BALM2的突破 激光SLAM领域一直面临一个核心难题&#xff1a;如何高效处理海量点云数据的同时保证位姿估计的精度&#xff1f;传统激光BA&#xff08;Bundle Adjustment&#xff09;方法在处理大规模场景时&#xff0c;往往陷入计算资源的泥潭。我曾在实际项目…...

编程新知 2026/3/30 21:39:04