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

JS-元素尺寸与位置

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

获取宽高

元素.offsetWidth
元素.offsetHeight

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

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

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

获取位置

方法一:

元素.offsetLeft
元素.offsetTop

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

2)注意是只读属性

方法二:

element.getBoundingClientRect()

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

http://www.lryc.cn/news/284038.html

相关文章:

  • 2024-01-15(SpringMVCMybatis)
  • Node+Express编写接口---前端
  • 防火墙技术
  • 图灵日记之java奇妙历险记--String类
  • 代码随想录算法训练营第六天| 242 有效的字母异位词 349 两个数组的交集 202 快乐数 1 两数之和
  • 数学建模--比赛
  • JVM工作原理与实战(十六):运行时数据区-Java虚拟机栈
  • DC-4靶机刷题记录
  • 【前端学习笔记1】css基础
  • CVE-2023-46226 Apache iotdb远程代码执行漏洞
  • Redis实战之-分布式锁
  • Cookie同源策略
  • 6、Numpy形状操纵
  • C++初阶类与对象(二):详解构造函数和析构函数
  • 【Vue3】3-3 : 组件之间是如何进行互相通信的
  • 网络端口映射和端口转发的区别和联系
  • VLSI超大规模集成电路设计复习
  • GCC 内联汇编
  • springboot整合websocket后启动报错:javax.websocket.server.ServerContainer not available
  • Vue面试之生命周期(上篇)
  • Gin 框架之用户密码加密
  • 【创作活动】ChatGPT 和文心一言哪个更好用?
  • 【linux】查看Debian应用程序图标对应的可执行命令
  • TortoiseSVN客户端如何安装配置并实现公网访问服务端提交文件到本地服务器
  • 【AUTOSAR】RTE 接口类型、应用场景差别及实例讲解
  • Qt应用开发(安卓篇)——Hello Qt On Android
  • 第十三讲_css 伸缩盒模型flex
  • 【C++干货铺】C++11常用新特性 | 列表初始化 | STL中的变化
  • k8s的对外服务---ingress
  • element-ui的el-upload组件实现上传拖拽排序图片顺序(sortablejs)