获取元素宽高

获取元素宽高值

1.内联样式. element.style读取的只是元素内联样式,即写在元素的 style 属性上的样式,支持读写.

var elebox = document.getElementById('eleId');
var h = elebox.style.height;

外联样式、嵌套样式无法通过上述方法直接获取.

2.getComputedStyle (Chrome/ff)和currentStyle(ie)

var style = window.getComputedStyle ? window.getComputedStyle(elebox ,null) : null || elebox.currentStyle;
var h = style.height;

getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。只读不能写.

参数2不需要伪元素信息时,填null.

相同点

以上两种方法返回的都是 CSSStyleDeclaration 对象,返回的对象的键名是 css 的驼峰式写法.

3.cssRules(Chrome/ff)或rules(ie)

 var sheet = document.styleSheets[0];
 var rule = (sheet.cssRules || sheet.rules)[0];
 var h = rule.style.height;

最新的chrome都可以使用.

document.styleSheets 的返回对象是一个 styleSheetList ,是 styleSheet 对象的有序集合.

//获取元素的任意 CSS 属性值。
function getStyle(element, attr) {
   if(element.currentStyle) {
        return element.currentStyle[attr];
   } else {
        return getComputedStyle(element, false)[attr];
   }
}

4.clientHeight、scrollHeight、offsetHeight

通过上述三个属性获取数值,但是受其它参数影响.