js 获取元素位置和大小_js 位置_Js宽度高度（详解）

于 2022-12-10 12:07:11 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 js 获取元素位置和大小 js 位置 Js宽度高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011127019/article/details/128263330
版权
本文详细介绍了JavaScript获取元素的位置和大小的方法，包括client、offset、scroll属性，浏览器、body以及屏幕的宽高，以及事件中获取元素位置的相关属性。还探讨了在不同浏览器中的兼容性问题，并提供了相关使用案例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、js 获取元素的位置和大小----只读属性

1.元素的大小和位置

1.可视大小和位置 clientLeft，clientTop,clientWidth,clientHeight

clientLeft,clientTop:

该属性标识元素的padding+content的在元素的位置，可以用来读取元素的border的宽度和高度

 clientWidth,clientHeight:

元素可视宽度和高度， padding+content-滚动条宽度 大小。

2.完整大小和位置 offsetLeft，offsetTop,offsetWidth,offsetHeight

offsetLeft,offsetTop:

该属性指的是当前元素，相对于其offsetParent左边距离和上边距离，offsetParent指的是当前元素的离自己最近的具有定位的（positi

了解本专栏 订阅专栏 解锁全文 超级会员免费看
博客
Cordova 插件合集_cordova-plugin合集
04-05 5980
1.0cordova-plugin-contacts 联系人，新增，联系人，拨打电话cordova plugin add cordova-plugin-contacts详细：cordova-plugin-contacts联系人操作_天马3798的博客-CSDN博客_cordova 联系人1.cordova-plugin-themeablebrowsercordova plugin add cordova-plugin-themeablebrowser详细使用：cordova-p...
博客
Vant 使用整理
05-19 145
有赞vant4的官方文档的服务器在国外，国内的有些网段打不开。可以尝试，清空浏览器缓存。或者查看其他使用文档。
博客
.Net Mqtt协议-MQTTNet（一）简介
05-10 914
一、MQTTNet 简介MQTTnet 是一个高性能的MQTT类库，支持.NET Core和.NET Framework。
博客
MQTT协议介绍
05-10 817
MQTT（Message Queuing Telemetry Transport）是一种由IBM开发的轻量级消息传输协议，专为低带宽、高延迟或不可靠的网络环境设计，广泛应用于物联网（IoT）、智能家居和工业自动化等领域。MQTT采用发布/订阅模型，支持一对多通信，并提供三种服务质量级别（QoS0、QoS1、QoS2）以确保消息传递的可靠性。其轻量级特性使其特别适合嵌入式设备和网络带宽有限的场景。MQTT服务器作为发布-订阅架构的转发中心，支持多种编程语言和操作系统，如PHP、JAVA、Python、C、C#
博客
Nginx bash命令使用整理
04-17 261
当你遇到 Failed to restart nginx.service: Unit nginx.service not found 错误时，这意味着系统无法找到 Nginx 的服务单元文件。这通常是因为 Nginx 没有通过 systemd 管理，或者 Nginx 没有正确安装。首先，确保 Nginx 已经正确安装。1. 检查 Nginx 是否正确安装。
博客
Nginx Http配置整理
04-17 388
Nginx 支持 rewrite 功能。若您在编译时没有去掉 pcre，您可在 HTTP 的 server 中增加。由于版本问题，配置文件可能存在不同的写法。例如：Nginx 版本为。，即可将默认80端口的请求重定向为 HTTPS。未添加注释的配置语句，您按照下述配置即可。通过 Web 服务器实现跳转。在页面中添加 JS 脚本。在后端程序中添加重定向。
博客
微信小程序webview与小程序页面交互
04-08 1171
会自动铺满整个小程序页面，提供的接口返回小程序页面。2.小程序 web-view 页面参数接收。1.html 网页端代码编写。
博客
微信小程序开发前端培训课程
04-07 347
1.Box 盒子模型，列表布局（一行两列，一行多列）3.文字居中，块居中 ，水平方向，垂直方向。3、微信小程序的项目结构、创建、发布审核。1、微信小程序的概念、历史、发展。6、微信小程序的wxml基础语法。4、微信小程序开发常见问题整理。10、微信小程序的路由和导航。2.布局DIV+span。2、微信小程序的开发工具。5、微信小程序的框架接口。7、微信小程序的配置文件。8、微信小程序的布局组件。9、微信小程序的表单组件。2.单行文字，多行文字。1.HTML标签基础。6.CSS3动画基础。
博客
C#后端开发培训教程
04-07 301
1.Asp.Net Core项目基础创建，生命周期。3.Asp.Net Core接口访问、传参。4.Asp.Net Core接口测试、跨域。2.Element UI 搭建、基础使用。2.Asp.Net Core接口定义。C# Linq 数据源操作基础语法。1.Vue 基础使用、数据绑定。1.创建数据、备份还原数据库。4.班级、学生数据结构示例。3.Sql语句：增删改查。2.数据表：数据类型对应。C#基础语法、数据类型。C#数组、集合、类操作。5.数据库表：增删改查。4.数据库上下文操作。
博客
Vue 类与样式
03-29 468
将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。都是 attribute，我们可以和其他 attribute 一样使用。除了字符串外，表达式的值也可以是对象或数组。二、绑定内联样式，绑定style。用法提供了特殊的功能增强。
博客
Vue 表单输入绑定，双向绑定
03-22 559
如果该值无法被 parseFloat() 处理，那么将返回原始值。特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。如果你想要默认自动去除用户输入内容中两端的空格，你可以在。注意：要制定type=number html属性。如果你想让用户输入自动转换为数字，你可以在。还可以用于各种不同类型的输入，用户Vue 组件属性双向绑定。用于Vue 表单双向绑定。
博客
Vue生命周期_Vue生命周期钩子
03-15 424
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。注册一个回调函数，在组件挂载完成后执行。组件创建时候触发执行。
博客
Vue 概念、历史、发展和Vue简介
03-15 1369
当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。2014年2月，尤雨溪在Hacker News、Echo JS与Reddit的R和JavaScript版块上均发布了Vue.js的最早版本，发布后的一天之内，Vue.js就登上了这3个网站的首页，之后Vue.js成为GitHub上最受欢迎的开源项目之一。——Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。
博客
Asp.Net Core WebAPI开发教程（入门）
03-01 472
二、Asp.Net Core WebAPI 请求案例。
博客
Asp.Net Core MVC 中级开发教程
02-15 346
Asp.Net Core MVC 中级开发教程。二、Asp.Net Core 服务使用和封装。三、Asp.Net Core 中间件。
博客
vue2老版本 npm install 安装失败_安装卡主
02-13 797
特别说明：vue2老版本安装慢、运行慢，建议升级vue3+element plus+ vite。"core-js": "^3.6.5" 升级版本直接修改版本号。删除文件 package-lock.json。安装时间还是比较长，大约10分钟左右；第一步、修改npm 镜像为国内镜像。
博客
微信小程序如何隐藏分享功能_如何取消页面分享功能
12-28 732
在 onShareAppMessage 事件中监听转发按钮，或者自定义转发按钮的转发事件。转发可以配置转发是路径参数，可以自定义转发是图片内容。注意：这个事件，是在添加页面的时候，自动会生成的。解决方案：将此事件监听，从页面中删除就可以了。可以分享转发当前页面到群或者微信好友。右上角胶囊按钮》转发。
博客
微信小程序开发中级教程
12-21 309
4.微信小程序分享、转发朋友/群、分享朋友圈。#10.微信小程序扫码、二维码识别，条码识别。#9.微信小程序地图组件、地图接口整理。#1.微信小程序自定义组件基础。#2.微信小程序自定义组件传值。#3.微信小程序自定义组件通信。#5.微信小程序视频号对接整理。#7.微信小程序自定义Tab栏。#6.微信小程序自定义导航栏。#8.微信小程序位置接口整理。微信小程序开发中级教程。
博客
微信小程序的概念、历史、发展
12-07 1848
2020年6月23日，在WWDC 2020全球开发者大会上，苹果推出了一项新的“App Clip”小程序功能，该功能是基于卡片的快速应用程序，可让你在需要时访问应用程序的一小部分，而无需用户安装完整的应用程序。2016年1月11日，2016微信公开课PRO版在广州举行，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过公众号完成一些App的部分功能。2023年9月1日起，微信公众平台将推出备案管理系统，要求微信小程序在上架之前必须完成备案，以提高小程序的管理规范化。
博客
微信小程序开发入门教程
12-07 311
3、微信小程序的项目结构、创建、发布审核。#1、微信小程序的概念、历史、发展。#6、微信小程序的wxml基础语法。#4、微信小程序开发常见问题整理。#10、微信小程序的路由和导航。#2、微信小程序的开发工具。#5、微信小程序的框架接口。#7、微信小程序的配置文件。#8、微信小程序的布局组件。#9、微信小程序的表单组件。微信小程序开发入门教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值