currentStyle、getComputedStyle 获取样式

dilungui5322

于 2017-07-12 16:39:00 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/YYvam1288/p/7156281.html

版权

本文详细解析了CSS中不同高度属性的含义与应用：style.height获取行间样式；currentStyle.height与getComputedStyle获取div的content高度；clientHeight包括content与padding；offsetHeight则包含content、padding与border。通过实例代码展示了在不同浏览器环境下如何正确获取元素的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style.height 获取的是行间的样式

currentStyle.height、getComputedStyle(elem,null).height 获取的是 div 的 content 的宽高，

clientHeight 获取的是 content+padding，

offsetHeight 获取的是content+padding+border。

<script>    
window.onload = function(){
    var div1 = document.getElementById('div1');
    var prop = '';
    if(div1.currentStyle){
        // IE浏览器下获取行间或样式表样式
        prop = div1.currentStyle.height;
    }else if(window.getComputedStyle){
        // 标准浏览器下获取计算样式，两种写法都可以
        // prop = document.defaultView.getComputedStyle(div1,null).height;
        prop = window.getComputedStyle(div1,null).height;
    }    
    console.log(prop);
    // height:auto;  ==》 IE返回的是auto，标准浏览器返回的是实际值
}
</script>