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

API-元素尺寸与位置

news 2026/3/28 3:12:52

学习目标：

  • 掌握元素尺寸与位置

学习内容：

  1. 元素尺寸与位置
  2. 仿京东固定导航栏案例
  3. 实现bilibili点击小滑块移动效果

元素尺寸与位置：

  • 使用场景：

前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。

简单说，就是通过js的方式，得到元素在页面中的位置。

这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了。
在这里插入图片描述

  • 获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border 。

offsetWidth和offsetHeight。

获取出来的是数值，方便计算。

注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0。

  • 获取位置：
  1. offsetLeft和offsetTop 注意是只读属性。

获取元素距离自己定位父级元素的左、上距离。

在这里插入图片描述

 <title>offsetLeft</title><style>div {position: relative;width: 200px;height: 200px;background: pink;margin: 100px;}p {width: 100px;height: 100px;background: purple;margin: 50px;}</style>
</head><body><div><p></p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')// console.log(div.offsetLeft)//检测盒子的位置  最近一级带有定位的祖先元素console.log(p.offsetLeft)</script></body>
  1. element.getBoundingClientRect()

方法返回元素大小及其相对于视口的位置。

在这里插入图片描述

 <title>获取元素大小位置的另外方法</title><style>body {height: 2000px;}div {width: 200px;height: 200px;background: pink;margin: 100px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')console.log(div.getBoundingClientRect())</script></body>
  • 小结

  1. offsetWidth和offsetHeight是得到元素什么的宽高？

     内容 + padding + border

  2. offsetTop和offsetLeft得到位置以谁为准？

    带有定位的父级
如果都没有则以文档左上角为准
属性作用说明
scrollLeft和scrollTop 被卷去的头部和左侧配合页面滚动来用，可读写
clientWidth和clientHeight获得元素宽度和高度不包含border、margin，滚动条 ，用于js获取元素大小，只读属性
offsetWidth和offsetHeight获得元素宽度和高度包含border、margin，滚动条，只读
offsetTop和offsetLeft获取元素距离自己定位父级元素的左、上距离获取元素位置的时候使用，只读属性

仿京东固定导航栏案例：

<!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;box-sizing: border-box;}.content {overflow: hidden;width: 1000px;height: 3000px;background-color: pink;margin: 0 auto;}.backtop {display: none;width: 50px;left: 50%;margin: 0 0 0 505px;position: fixed;bottom: 60px;z-index: 100;}.backtop a {height: 50px;width: 50px;background: url(./images/bg2.png) 0 -600px no-repeat;opacity: 0.35;overflow: hidden;display: block;text-indent: -999em;cursor: pointer;}.header {position: fixed;top: -80px;left: 0;width: 100%;height: 80px;background-color: purple;text-align: center;color: #fff;line-height: 80px;font-size: 30px;transition: all .3s;}.sk {width: 300px;height: 300px;background-color: skyblue;margin-top: 500px;}</style>
</head><body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt=""><a href="javascript:;"></a></div><script>const sk = document.querySelector('.sk')const header = document.querySelector('.header')//1.页面滚动事件window.addEventListener('scroll', function () {//当页面滚动到 秒杀模块的时候，就改变头部的top值//页面被卷去的头部 >= 秒杀模块的位置  offsetTopconst n = document.documentElement.scrollTop// if (n >= sk.offsetTop) {//   header.style.top = 0// } else {//   header.style.top = '-80px'// }header.style.top = n >= sk.offsetTop ? 0 : '-80px'})</script></body></html>

实现bilibili点击小滑块移动效果：

<style>.line {transition: all .3s;}</style><script>//1.获取父元素 添加事件委托const list = document.querySelector('.tabs-list')const line = document.querySelector('.line')//2.给a注册事件list.addEventListener('click', function (e) {//判断点击的是aif (e.target.tagName === 'A') {// console.log(11)//得到当前链接的  offsetLeft// console.log(e.target.offsetLeft)//让line 盒子来进行移动line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>

相关文章：

API-元素尺寸与位置

学习目标&#xff1a; 掌握元素尺寸与位置 学习内容&#xff1a; 元素尺寸与位置仿京东固定导航栏案例实现bilibili点击小滑块移动效果 元素尺寸与位置&#xff1a; 使用场景&#xff1a; 前面案例滚动多少距离&#xff0c;都是我们自己算的&#xff0c;最好是页面滚动到某个…...

编程日记 2024/7/3 15:47:08

C语言中的基础指针操作

在C语言中&#xff0c;指针是一个非常重要的概念&#xff0c;它提供了直接访问内存地址的能力。指针变量用于存储内存地址&#xff0c;而不是数据值&#xff0c;在某种意义上和门牌号具有相似含义&#xff1a;指针是一个变量&#xff0c;其存储的是另一个变量的内存地址&#x…...

编程日记 2024/7/3 15:44:05

LabVIEW环境下OCR文字识别的实现策略与挑战解析

引言 在自动化测试领域&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术扮演着重要角色&#xff0c;它能够将图像中的文字转换成机器可编辑的格式。对于使用LabVIEW约5个月&#xff0c;主要进行仪器控制与数据采集的你而言…...

编程日记 2024/7/3 15:43:03

中英双语介绍美国的州：堪萨斯州（Kansas）

中文版 堪萨斯州简介 堪萨斯州&#xff08;Kansas&#xff09;位于美国中部&#xff0c;以其广阔的平原、丰富的农业资源和多样的文化遗产而著称。以下是对堪萨斯州的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要城市。 地理位置 堪萨斯州位于美国中…...

编程日记 2024/7/3 15:42:02

信息收集---端口服务信息收集

1. 什么是端口 是设备与外界通讯交流的出口。端口可分为虚拟端口和物理端口&#xff0c;其中虚拟端口指计算机内部或交换机路由器内的端口&#xff0c;不可见。例如计算机中的80端口、21端口、23端口等。物理端口又称为接口&#xff0c;是可见端口&#xff0c;计算机背板的RJ45…...

编程日记 2024/7/3 15:36:56

Python知识点背诵手册，超详细知识梳理

一、手册介绍 《Python知识点背诵手册》是一份详尽的Python学习资料&#xff0c;旨在帮助学习者系统地掌握Python语言的基础知识和进阶技能。该手册将Python的所有关键语法和概念进行了精炼的总结&#xff0c;并以易于理解和记忆的方式呈现。以下是手册的主要特点和内容概述&a…...

编程日记 2024/7/3 15:35:55

【Pytorch实用教程】如何在多个GPU上使用分布式数据并行进行训练模型

文章目录 1. 代码（可直接运行，含随机生成的训练数据）2. 代码的详细解释2.1. 导入必要的库和模块2.2. 设置每个进程的初始设置2.3. 随机生成数据集类 `RandomDataset`2.4. 训练函数 `train`1. 代码（可直接运行，含随机生成的训练数据） 以下是一个基于PyTorch的多GPU分布式…...

编程日记 2024/7/3 15:33:51

PIL,OpenCV,Pytorch处理图像时的通道顺序(颜色,长宽深)

项目颜色通道顺序长宽通道顺序数据类型取值范围PILRGBHWCndarray0-255 (byte)OpenCVBGRHWCndarray0-255 (byte)PyTorchRGB/BGR (取决于如何读取)(N)CHWtensor0-1 (float, 标准化后); 0-255 (int, 未标准化) 注意以下几点&#xff1a; 颜色通道顺序&#xff1a;PIL默认使用RGB顺…...

编程日记 2024/7/3 15:32:50

经纬恒润亮相2024世界智能产业博览会

近日&#xff0c;以“智行天下 能动未来”为主题的2024世界智能产业博览会&#xff08;以下简称“智博会”&#xff09;在国家会展中心&#xff08;天津&#xff09;成功举办。本次智博会上&#xff0c;经纬恒润自主研发的汽车电子产品联合天津&#xff08;西青&#xff09;国家…...

编程日记 2024/7/3 15:29:46

Python序列化和反序列化

一.序列化和反序列化 在Python中&#xff0c;序列化&#xff08;Serialization&#xff09;和反序列化&#xff08;Deserialization&#xff09;是处理对象数据的过程&#xff0c;主要用于对象的存储或网络传输。 序列化&#xff08;Serialization&#xff09; 序列化是将Pyth…...

编程日记 2024/7/3 15:28:45

Stream toArray 好过collect

toArray 比collect 更好用&#xff0c;这样就不需要判断Null。 if(_user.getUserRole()!null) {_user.setRole(_roleList.stream().filter(_e->_e.getRoleId()_user.getUserRole()).toArray(Role[]::new)[0]); } if(_user.getUserRole()!null) {_user.setRole(_roleList.s…...

编程日记 2024/7/3 15:27:44

qt/c++/mysql教务管理系统

简介 qt/c/mysql教务管理系统 学生端&#xff0c;教师端&#xff0c;管理员端 演示 qt/c/mysql教务管理系统 源码获取 printf("白嫖勿扰,需要的加v%s","ywj17347418171");...

编程日记 2024/7/3 15:26:43

Echarts公共方法

Vue引入Echarts install 1.安装Echartsnpm install echarts --save 2.项目全局引入形式--#main.js 全局引入形式import * as echarts from "echarts"Vue.prototype.$echarts echarts 公共方法JS /*** author: wangjie* description: 通用echarts图表封装* date: …...

编程日记 2024/7/3 15:25:42

鸿蒙学习（二）

文章目录 1、弹窗2、走马灯&#xff08;实现轮播图效果&#xff09;3、注解6、多选框、单选框7、Stack8、TextTimer9、DatePicker 1、弹窗 显示提示信息或者用于用户交互 导入模块 prompt 接口 showToast:显示toast showDialog:显示对话框 showContextMenu:显示上下文菜单 sh…...

编程日记 2024/7/3 15:24:41

企业机构营销目前106短信群发还有用吗？此文告诉你该如何抉择！

在当今竞争激烈的企业营销环境中&#xff0c;106短信群发平台依然是众多企业机构青睐的营销工具之一。尽管互联网技术的发展带来了多样化的沟通方式&#xff0c;但106短信群发凭借其直达性强、成本低廉、覆盖广泛等优势&#xff0c;仍然保持着不错的营销效果。然而&#xff0c;…...

编程日记 2024/7/3 15:23:39

DJYGUI AI低代码图形编程开发平台：开启嵌入式软件图形编程新纪元

在科技高速发展的当今时代&#xff0c;软件开发行业对创新和高效的需求日益增长。DJYGUI AI低代码图形编程开发平台的出现&#xff0c;为智能屏、物联屏、串口屏等嵌入式显示设备领域带来了全新的机遇。该平台由都江堰操作系统 AI 代码自动生成平台研发&#xff0c;具有显著的优…...

编程日记 2024/7/3 15:21:36

为什么不能在foreach中删除元素

文章目录 快速失败机制&#xff08;fail-fast&#xff09;for-each删除元素为什么报错原因分析逻辑分析 如何正确的删除元素remove 后 breakfor 循环使用 Iterator 总结 快速失败机制&#xff08;fail-fast&#xff09; In systems design, a fail-fast system is one which i…...

编程日记 2024/7/3 15:20:34

python学习-tuple及str

为什么需要元组 定义元组 元组的相关操作 元组的相关操作 - 注意事项 元组的特点 字符串 字符串的下标&#xff08;索引&#xff09; 同元组一样&#xff0c;字符串是一个&#xff1a;无法修改的数据容器。 如果必须要修改字符串&#xff0c;只能得到一个新的字符串&#xff…...

编程日记 2024/7/3 15:19:33

Python深度理解系列之【排序算法——冒泡排序】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️木道寻的主页 文章目录 &#x1f525;前言&#x1f680;冒泡排序python实现算法实现图形化算法展示 ⭐️⭐️⭐️总结 &#x1f525;前…...

编程日记 2024/7/3 15:18:32

边界框在目标检测中的作用与应用

目标检测是计算机视觉领域的核心任务之一&#xff0c;旨在从图像或视频中识别和定位感兴趣的目标。边界框&#xff08;Bounding Box&#xff09;是目标检测中常用的一种表示方法&#xff0c;用于确定目标在图像中的确切位置。本文将详细探讨边界框的概念、它在目标检测中的角色…...

编程日记 2024/7/3 15:16:30

OpenClaw开发辅助：Qwen3.5-9B实现日志分析与错误自动修复

OpenClaw开发辅助&#xff1a;Qwen3.5-9B实现日志分析与错误自动修复 1. 为什么需要AI辅助日志分析&#xff1f; 每次凌晨被报警短信吵醒&#xff0c;盯着密密麻麻的日志文件找异常时&#xff0c;我都会想&#xff1a;如果能有个AI助手帮我自动分析日志、定位问题甚至尝试修复…...

编程新知 2026/3/28 1:31:46

从零开始：用QGIS和PostgreSQL构建交通路线空间数据库（含Python脚本自动化技巧）

从零开始&#xff1a;用QGIS和PostgreSQL构建交通路线空间数据库&#xff08;含Python脚本自动化技巧&#xff09; 在交通规划与智慧城市建设的浪潮中&#xff0c;空间数据的高效管理成为技术团队的核心挑战。传统文件存储方式难以应对大规模交通网络数据的实时查询与分析需求&…...

编程新知 2026/3/27 23:44:48

Debian12下Docker国内镜像加速全攻略：以腾讯云为例快速部署WordPress

Debian12下Docker国内镜像加速全攻略&#xff1a;以腾讯云为例快速部署WordPress 在Debian12系统中使用Docker时&#xff0c;国内用户常遇到镜像下载速度慢的问题。本文将详细介绍如何配置国内镜像源加速Docker&#xff0c;并以腾讯云为例&#xff0c;快速部署WordPress环境。…...

编程新知 2026/3/27 23:06:35

用腾讯云轻量锐驰和对象存储，手把手教你30分钟搞定私人不限速网盘（附SSL证书配置）

零基础30分钟搭建高性能私人网盘&#xff1a;腾讯云轻量锐驰对象存储实战指南 你是否也受够了公有网盘动辄几百KB的下载速度&#xff1f;每次分享文件给朋友&#xff0c;对方总要忍受龟速下载的煎熬。更别提那些突然消失的文件和频繁弹出的会员广告——是时候拥有一个完全自主掌…...

编程新知 2026/3/27 21:33:56

WSABuilds系统调用：Windows与Android内核交互机制解析

WSABuilds系统调用&#xff1a;Windows与Android内核交互机制解析 【免费下载链接】WSABuilds Run Windows Subsystem For Android on your Windows 10 and Windows 11 PC using prebuilt binaries with Google Play Store (MindTheGapps) and/or Magisk or KernelSU (root sol…...

编程新知 2026/3/27 20:43:38

OpCore-Simplify终极指南：零代码自动化黑苹果EFI配置实战

OpCore-Simplify终极指南&#xff1a;零代码自动化黑苹果EFI配置实战 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在macOS生态之外构建黑苹果系统&…...

编程新知 2026/3/27 20:35:37

Llama-3.2V-11B-cot应用场景：跨境电商多语言商品图信息提取案例

Llama-3.2V-11B-cot应用场景&#xff1a;跨境电商多语言商品图信息提取案例 1. 项目背景与价值 跨境电商平台每天需要处理海量商品图片&#xff0c;传统人工标注方式面临三大痛点&#xff1a; 语言障碍&#xff1a;商品图可能包含多种语言的文字信息效率瓶颈&#xff1a;人工…...

编程新知 2026/3/27 19:55:04

UE4/UE5碰撞事件全解：从Overlap到Hit的7个必知配置项

UE4/UE5碰撞系统深度解析&#xff1a;从基础配置到实战避坑指南 在虚幻引擎开发中&#xff0c;碰撞系统是构建交互体验的核心支柱之一。无论是角色移动、物体交互还是战斗判定&#xff0c;都离不开精准的碰撞检测机制。本文将深入剖析UE4/UE5中Overlap与Hit事件的本质区别&…...

编程新知 2026/3/27 19:18:52

SDMatte镜像结构详解：/opt/sdmatte-web目录布局与模型路径规范说明

SDMatte镜像结构详解&#xff1a;/opt/sdmatte-web目录布局与模型路径规范说明 1. 镜像概述 SDMatte 是一款面向高质量图像抠图场景的AI模型&#xff0c;特别适合处理以下任务&#xff1a; 商品图主体分离透明物体提取&#xff08;如玻璃器皿、薄纱等&#xff09;复杂边缘精…...

编程新知 2026/3/27 19:02:49

OpenArk：新一代Windows系统安全分析工具完整指南

OpenArk&#xff1a;新一代Windows系统安全分析工具完整指南 【免费下载链接】OpenArk The Next Generation of Anti-Rookit(ARK) tool for Windows. 项目地址: https://gitcode.com/GitHub_Trending/op/OpenArk 如果你正在寻找一款强大的Windows系统安全分析工具&#…...

编程新知 2026/3/27 18:58:48