js获取元素的偏移量offset简单方法(必看)

js获取元素的偏移量offset简单方法(必看)

这里有一个js获取元素偏移量的简单方法(必看)。我觉得边肖挺好的。我现在就分享给你,给你一个参考。来和边肖一起看看吧。

以前是看别人写的,后来学到了一些东西。现在我也把自己的学习写下来,给你一个学习的机会。欢迎大家的评论和建议,共同进步。还有六个人关注我,哈哈开心。我会继续写下去。

null和undefined都表示没有,但是null表示属性存在,值不存在,undefined表示连这个属性都不存在。

//例如

document.parentNode//:固有的属性父节点的属性为空(因为页面中的文档已经是顶级元素,它没有父节点)

Document.parentnode//undefined(因为没有parentnode属性)

1、parentNode:

HTML结构层次中父节点的上层元素

var outer=document . getelementbyid( outer );

var inner=document . getelementbyid( inner );

var center=document . getelementbyid( center );

center.parentNode //inner

2、offsetParent:

父引用在同一个平面,最外面的元素是里面所有元素的父引用(不一定和HTML层次结构有关)

一般来说,页面中所有元素的父引用是body。

document . body . offset parent//null

如果要改变父参照,需要通过位置定位来改变(绝对相对固定可以改变)。

!文档类型html

html lang=en

meta charset=UTF-8

标题文档/标题

风格

*{

边距:0;

填充:0;

}

#外部{

宽度:180px

高度:180px

边距:50px自动;

边框:10px纯色# 000;

背景:橙色;

填充:50px

}

#内部{

宽度:80px

高度:80px

填充:50px

边框:10px纯色# 000;

背景:绿色;

}

#中心{

宽度:50px

高度:50px

边框:10px纯色# 000;

背景:红色;

}

/风格

/头

身体

div id=outer

div id=inner

div id=center/div

/div

/div

脚本

var outer=document . getelementbyid( outer );

var inner=document . getelementbyid( inner );

var center=document . getelementbyid( center );

outer . style . position= relative ;//以便内部和中心的引用在外部。

center.offsetParent//outer

inner.offsetParent//outer

outer.offsetParent//body

outer . style . position= relative ;//

inner . style . position= relative ;

center.offsetParent//inner

inner.offsetParent//outer

outer.offsetParent//body

/脚本

/body

/html

3、offsetTop/offsetLeft :

当前元素(外边框)距其父引用(内边框)的偏移距离

具体如下图所示:

下面是一个offset方法:相当于jQuery中的offset方法,可以获取页面中任意元素距离正文的偏移量(包括左偏移量和上偏移量),而不考虑当前元素的父引用。获得的一个结果是对象{左:从主体向左偏移,上:从主体向上偏移}

在标准的IE8浏览器中,当我们使用offsetLeft/offsetTop时,我们实际上计算的是父引用的边界。所以我们不需要自己加边框。

代码如下:

  

功能偏移(curEle){

var totalLeft=null,totalTop=null,par=curEle.offsetParent

//先加上自己的左偏移量和上偏移量。

total left=curele . offset left;

totalTop=curEle.offsetTop

//只要没有找到主体,我们也会累加父引用的边框和偏移量。

while(par){

if(navigator . user agent . index of( MSIE 8.0 )===-1){

//累积父引用的边框

total left=par . client left;

totalTop=par.clientTop

}

//累加父引用本身的偏移量

total left=par . offset left;

totalTop=par.offsetTop

par=par.offsetParent

}

返回{

左:totalLeft,

顶部:总计顶部

}

}

console.log(偏移(中心))。左)

以上js简单的获取元素偏移量的方法(必看)就是边肖分享的全部内容。希望给大家一个参考,多多支持我们。

js获取元素的偏移量offset简单方法(必看)