原生JS获取页面中DIV绝对位置的方法

一、原生JS获取页面中DIV绝对位置的方法

1、在 JS获取div高度的方法中，整理了几个有关于获取div高度的方法，后来又遇到一个问题，怎么获取DIV在页面中的绝对位置，因此在这篇笔记中记录一下。

2、 getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

3、 offsetLeft指的是元素相对于版面或由 offsetParent属性指定的父坐标的计算上侧位置，整型，单位像素。

4、借用这个思路，当我们想获取元素的绝对位置时，可以递归遍历，直到元素的父元素为body为止。

5、关于offsetParent属性，有以下几点Tips。

二、js设置div的位置

JS语言是不能够直接修改DIV的位置的，因为位置属于该控件的样式，若想用JS这种脚本语言调整DIV的位置，需要调用DIV的style属性进行设置，也就是需要调整DIV的CSS样式表。修改分步骤：

2、设置调整。修改的示例代码如下： var div1= document.getElementById('baiduSearch')； div1.style.marginTop='225px';通常position的属性没有设置或设了默认值absolute，所以使用的都是静态属性，这样就可以直接通过给位置属性数值来更改元素位置。在js调用时，含‘-’的样式属性调用时需要先去掉‘-’并将下一个字母大写，下面列一下css样式表中常用到的位置属性：top right left bottom margin paddingmargin-top margin-right margin-left margin-bottompadding-top padding-right padding-left padding-bottom

三、js 怎样获取div的宽度

1、运用js获取div宽度，原生JS获取DIV的属性有两种方法，js获取方法命令如下：

2、currentStyle和getComputedStyle，前者是兼容IE端的，后者也兼容W3C，两者内核不同，所以就有两种兼容的写法。

3、如果只是单独的获取某个属性值可以这样写：

4、obj.currentStyle[属性名];这种不兼容-webkit-内核的，

5、所以一般是封装成一个函数可以到处调用，而且不止针对某个属性值。

6、上面是封装好一个函数，可以直接调用。