JS-元素尺寸与位置

通过js的方式,得到元素在页面中的位置

获取宽高

元素.offsetWidth
元素.offsetHeight

1)获取元素的自身宽高、包括元素自身设置的宽高+padding+border

2)获取出来的是数值,方便计算

3)注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

获取位置

方法一:

元素.offsetLeft
元素.offsetTop

1)获取元素距离自己定位父级元素的左、上距离(与最近一级带有定位的祖先元素;如果没有则以文档左上角为准)

2)注意是只读属性

方法二:

element.getBoundingClientRect()

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/415138.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

30分钟带你深入优化安卓Bitmap大图

30分钟带你源码深入了解Bitmap以及优化安卓大图 一、前言二、Bitmap入门1. 如何创建Bitmap?2. Bitmap的堆内存分布在哪里3. 图片文件越大,Bitmap堆内存会越大吗?4. 如何管理Bitmap的内存?5. 实战修改Bitmap的堆内存,改变图片的图…

Linux Shell脚本入门

目录 介绍 编写格式与执行方式 Shell脚本文件编写规范 脚本文件后缀名规范 首行格式规范 注释格式 shell脚本HelloWord入门案例 需求 效果 实现步骤 脚本文件的常用执行三种方式 介绍 3种方式的区别 小结 多命令处理 Shell变量 环境变量 目标 Shell变量的介绍 变量类型 系统环境…

安全帽识别-赋能深圳自贸中心智慧工地

在当今的建筑行业中,安全管理一直是一个至关重要的议题。深圳自贸中心项目在这方面进行了一次有益的尝试——实施智慧工地安全帽识别系统。本文将对这一创新举措进行简要介绍。 项目背景 深圳自贸中心,作为一项标志性建设项目,承载着城市发展…

C语言——大头记单词

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 每一发奋努力的背后,必有加…

服务器数据恢复—异常关机导致Linux服务器目录项被破坏数据恢复案例

服务器数据恢复环境: 某品牌PowerEdge R730服务器PowerVault MD3200存储,划分若干lun,操作系统版本是centos7,EXT4文件系统。 服务器故障&分析: 服务器在运行过程中自动关机且无法启动,服务器管理员对服…

C语言——atoi函数解析

目录 前言 atoi函数的介绍 atoi函数的使用 atoi函数的模拟实现 前言 对于atoi函数大家可能会有些陌生&#xff0c;不过当你选择并阅读到这里时&#xff0c;请往下阅读&#xff0c;我相信你能对atoi函数熟悉该函数的头文件为<stdlib.h> 或 <cstdlib> atoi函数的…

Python学习从0到1 day6 python基础语法4 标识符、运算符和字符串

苦厄难夺凌云志&#xff0c;不死终有出头日 ——24.1.18 一、标识符 1.什么是标识符 标识符&#xff1a;用户在编程的时候所使用的一系列名字&#xff0c;用于给变量、类、方法等命名 2.标识符命名规则 python中&#xff0c;标识符命名规则主要有三类&#xff1a; ①内容限定 …

详细推导BEC和BSC的信道容量

目录 介绍 一. 熵的计算公式 二. 互信息 三. 计算BSC的信道容量 四. BEC信道与高斯信道容量 五. 信道传输速率与信道容量 小结 介绍 binary symmetric channel&#xff0c;简称BSC&#xff0c;中文翻译为二进制对称信道。 binary erasure channel&#xff0c;简称BEC&…

C++ 设计模式之策略模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 【简介】什么是策略模式&#xff08;第14种模式&#xff09; 策略模式是⼀种⾏为型设计模式&…

【算法】递归

递归 递归初始递归&#xff1a;数列求和递归的应用&#xff1a;任意进制转换递归深度限制递归可视化&#xff1a;分形树递归可视化&#xff1a;谢尔宾斯基Sierpinski三角形递归的应用&#xff1a;汉诺塔递归的应用&#xff1a;探索迷宫 分治策略和递归优化问题兑换最少个数硬币…

Java毕业设计-基于ssm的饮品店接单网页管理系统-第86期

获取源码资料&#xff0c;请移步从戎源码网&#xff1a;从戎源码网_专业的计算机毕业设计网站 项目介绍 基于ssm的饮品店接单网页管理系统&#xff1a;前端 jsp、jquery、bootstrap&#xff0c;后端 springmvc、spring、mybatis&#xff0c;角色分为管理员、员工、顾客&#…

浅析智能家居企业面临的组网问题及解决方案

在这个快速发展的时代&#xff0c;组网对于企业的发展来说是一个至关重要的环节。 案例背景&#xff1a; 案例企业是一家智能家居制造企业&#xff0c;在不同城市分布有分公司、店铺、工厂&#xff0c;这些点原本都是各自采购网络&#xff0c;与总部进行日常沟通、访问。 现在…