前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步。竟然还有六个人关注我了,哈哈开心。我会继续写下去的. .
//例如
文档。parentNode//浏览器天生自带的一个属性:父亲节点的属性空(因为一个页面中的文档已经是最顶级元素了,它没有父亲)
文档。parentnode//未定义(因为没有parentnode这个属性)
父亲节点,HTML结构层级关系中的上一级元素
var外=. getelementbyid(“外部”);
var内在=. getelementbyid(内在的);
var中心=. getelementbyid(“中心”);
中心。parentNode//内
之前
父级参照物在同一个平面中,最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)
一般来说一个页面中所有元素的父级参照物都是身体
document.body。offsetParent零
//想要改变父级参照物需要通过位置定位来进行改变(绝对相对固定的都可以进行改变,)
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
#{外
宽度:180 px;
身高:180 px;
保证金:50 px汽车;
边界:10 px固体# 000;
背景:橙色;
填充:50 px;
}
#{内部
宽度:80 px;
身高:80 px;
填充:50 px;
边界:10 px固体# 000;
背景:绿色;
}
#{中心
宽度:50 px;
高度:50 px;
边界:10 px固体# 000;
背景:红色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id="外"比;
& lt; div id=澳谠凇北?
& lt; div id="中心"祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt; script>
var外=. getelementbyid(“外部”);
var内在=. getelementbyid(内在的);
var中心=. getelementbyid(“中心”);
outer.style。位置=跋喽浴?//这样内部和中心的参照物都是外
center.offsetParent//外
inner.offsetParent//外
outer.offsetParent//身体
outer.style。位置="相对",//inner.style。位置=跋喽浴?
center.offsetParent//内
inner.offsetParent//外
outer.offsetParent//身体
& lt;/script>
& lt;/body>
& lt;/html>
当前元素(外边框)距离其父级参照物(内边框)的偏移距离
<强>具体如下图所示:
<强> 
下面是一个抵消方法:等同于jQuery中的抵消方法,实现获取页面中任意一个元素,距离身体的偏移(包含左偏移和上偏移),不管当前元素的父级参照物是谁。获取的一个结果是一个对象{左:距离身体的左偏移,上图:距离身体的上偏移}
在标准的IE8浏览器中,我们使用offsetLeft和offsetTop其实是把父级参照物的边框已经算在内了,所以我们不需要自己在单独加边框了
<强>代码如下: <强>
函数偏移(curEle) {
var totalLeft=null, totalTop=null, par=curEle.offsetParent;//首先加自己本身的左偏移和上偏移
totalLeft +=curEle.offsetLeft;
totalTop +=curEle.offsetTop//只要没有找到身体,我们就把父级参照物的边框和偏移也进行累加
而(par) {
如果(navigator.userAgent。indexOf (MSIE 8.0)===1) {//累加父级参照物的边框
totalLeft +=par.clientLeft;
totalTop +=par.clientTop
}//累加父级参照物本身的偏移
totalLeft +=par.offsetLeft;
totalTop +=par.offsetTop=par.offsetParent相当;
}
返回{
左:totalLeft,
上图:totalTop
}
}
console.log(抵消(中心).left)
以上这篇js获取元素的偏移量抵消简单方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
