js 元素位置

Js代码


1.获取dom元素的位置
利用offsetParent属性，获得元素相对于offsetParent的位置，再继续获取offsetParent元素的位置，两个位置叠加起来便是要求的值了。获取offsetParent的位置时使用的是同一方法，这样便形成递归。

Js代码
function pageX(elem){

return elem.offsetParent ?elem.offsetLeft + pageX( elem.offsetParent ) : elem.offsetLeft;

}


function pageY(elem){

return elem.offsetParent?elem.offsetTop + pageY(elem.offsetParent):elem.offsetTop;

}
2.获取dom元素相对于父节点的位置
不同浏览器对offsetParent的解释不一样，所以不能单纯用offsetTop和offsetLeft来获取。可以利用第一个方法，将父节点的位置减去本身节点的位置，这样便得到相对于父节点的编移量了。但如果浏览器将offsetParent解释成父节点，就可以直接使用offsetTop等属性了，代码如下：

Js代码
function parentX(elem){

return elem.parentNode==elem.offsetParent?elem.offsetLeft : pageX(elem)-pageX(elem.parentNode);

}

parentY方法类似。

3.获取dom元素本身的高和宽
这个稍微有点复杂，需要考虑到不同情况。
第一种情况：元素是显示的，即elem.style.display!="none"
可以利用offsetWidth属性，如果没有该属性，则可以计算出元素在css在的高宽，利用document.defaultView.getComputedStyle和elem.currentStyle.width。

Js代码
function cssX(elem){

if(elem.style.width)return elem.style.width;

if(elem.currentStyle)return elem.currentStyle.width;

if(document.defaultView && document.defaultView.getComputedStyle)

return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");

}

var w = offsetWidth || cssX(elem);

考虑第二种情况：元素被隐藏了，直接获取高宽是不行的，所以需要，显示元素，再获取高宽，然后再隐藏元素，恢复之前的状态。
先定义两个方法，显示元素和恢复元素状态：

Js代码
var resetCSS=function( elem, prop ) {
var old = {};
for ( var i in prop ) {
old[ i ] = elem.style[ i ];
elem.style[ i ] = prop[i];
}
return old;
}
var restoreCSS=function( elem, prop ) {
for ( var i in prop )
elem.style[ i ] = prop[ i ];
}

//保存元素的css值，并显示元素

var old = resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});

//获得元素高宽
var w = elem.clientWidth || cssX(elem);

//恢复元素样式
restoreCSS( elem, old );


这样，便可以编写一个获得元素宽度的方法了：

Js代码
function getWidth(elem){

if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssX(elem));
}
var old = resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || parseInt(cssX(elem));
restoreCSS( elem, old );
return w;

}

要获取元素的高度类推。

4.获取窗口高宽


Js代码
function getWindowWidth(){

var de = document.documentElement;
return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;

}

高度类推

5.获得页面高宽
这个可以利用body.scrollWidth属性就行了。

Js代码
function getPageWidth(){

return document.body.scrollWidth;

}


高度类推

6.获取滚动条的位置

Js代码
var scrollX=function() {
var de = document.documentElement;
return self.pageXOffset || ( de && de.scrollLeft ) || document.body.scrollLeft;
}

竖向位置类推