JS获取元素尺寸和位置

获取元素尺寸的方法

1.通过clientWidth, offsetWidth, scrollWidth.

clientWidht, clientLeft, clientX, offsetWidth, scrollWidth等具体的含义看DOM。

clientWidth=width+padding相当jQuery的innerWidth();

offsetWidth=width+padding+border相当于jQuery的outerWidth()，outerWidth(true) 则包括margin;

scrollWidth是元素的滚动宽度，包括padding.

clientWidth, offsetWidth, scrollWidth获取的是纯数字的值，但不能用于display:none;的元素，可用于visibility:hidden;的元素。

获取窗口的尺寸会有些不同，这涉及到渲染模式。

…盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

当页面是怪异模式时，IE无法识别document.documentElement，所以var height = document.compatMode==”CSS1Compat”?document.documentElement.clientHeight : document.body.clientHeight;或者可以通过下面的函数直接获取尺寸。

function getWindowSize(){
var w=document.documentElement.clientWidth||document.body.clientWidth;
var h=document.documentElement.clientHeight||document.body.clientHeight;
return{'w':w,'h':h};
}

其实也可以通过window.innerWidth和window.outerWidth获取屏幕的尺寸，不过IE并不支持。

获取文档的尺寸时，当页面是标准模式下，document.body.clientHeight则是文档的高度。而document.body.offsetHeight, document.body.scrollHeight, document.documentElement.offsetHeight, document.documentElement.scrollHeight也是文档的高度，但在IE下document.documentElement.offsetHeight则是窗口的高度，很奇怪，自己也有点晕了。

2. 通过document.defaultView.getComputedStyle

IE并不支持这个方法，IE可以通过currentStyle方法。不过，两者在细节上据说还是有所区别的，document.defaultView.getComputedStyle获得的是绝对值，即em单位会转换成px，但currentStyle则不会。

function getStyle(obj,pro){
return obj.currentStyle ?
obj.currentStyle[pro] :
document.defaultView.getComputedStyle(obj,null)[pro];
}

getStyle()函数获取的是带单位的值，可用于display:none;的元素，但此时无法获得未在样式中显示定义的属性，例如高度是自适应的元素，获得的值就是auto。如果元素未定义display:none;即使高度自适应，也可以获得实际的高度值。getStyle()获得的是计算后的样式值。

PS: 那如何获得隐藏的自适应元素的尺寸呢，js获取隐藏元素(display:none)的尺寸有解说。

PS: 如果用该方法获得float和opacity属性值，getStyle()函数则要做一些变动，可以参考prototype的getStyle()函数。

3. obj.style.width

obj.style.width获取的是带单位的值，但只能获取获取内嵌的样式，即<code><div style=”width:100px; height:100px”></code>这种形式的属性值，内部样式和外部样式中的属性值都无法获得。如果没有内联样式，获取的值就是空。通常也是通过obj.style来设置尺寸，不过要记得带单位。

获取元素位置的方法

1. getBoundingClientRect()

function getPos(obj){
return {
top:document.documentElement.scrollTop+obj.getBoundingClientRect().top,
left:document.documentElement.scrollLeft+obj.getBoundingClientRect().left
};
}

2. offsetTop和offsetLeft

function getPos(obj){
var pos = {"top":0, "left":0};
if (obj.offsetParent){
while (obj.offsetParent){
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if(obj.x){
pos.left += obj.x;
}else if(obj.x){
pos.top += obj.y;
}
return pos;
}

方法一的效率比较高，但是safari并不支持方法一，如果需要兼容safari还是得要方法二。

Tagged with:
JavaScript|Posted in
Javacript|