首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:26
JS offsetParent属性:获取最近的上级定位元素
在 JavaScript 中,offsetParent 属性表示最近的上级定位元素。要获取相对父级元素的位置,可以先判断 offsetParent 属性是否指向父元素,如果是,则直接使用 offsetLeft 和 offsetTop 属性获取元素相对于父元素的距离;否则分别获得当前元素和父元素距离窗口的坐标,然后求差即可。
//获取指定元素距离父元素左上角的偏移坐标 //参数:e表示获取位置的元素 //返回值:返回对象直接量,其中属性x表示x轴偏移距离,属性y表示y轴偏移距离 function getP (e) { if (e.parentNode == e.offsetParent) { //判断offsetParent属性是否指向父级元素 var x = e.offsetLeft; //如果是,则直接读取offsetLeft属性值 var y = e.offsetTop; //读取offsetTop属性值 } else { //否则调用getW()扩展函数获取父元素的偏移位置,并返回它们的差值 var o = getPoint (e); var p = getPoint (e.parentNode); var x = o.x - p.x; var y = o.y - p.y; } return { //返回当前元素距离父元素的坐标 "x" : x, "y" : y }, }下面调用该扩展函数获取指定元素相对父元素的偏移坐标。
var box = document.getElementById("box"); var o = getP (box); //调用扩展函数获取元素对应父元素的偏移坐标 console.log(o.x); //读取x轴坐标偏移值 console.log(o.y); //读取y轴偏坐标移值
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频