原生JS获取CSS属性值

最新推荐文章于 2021-08-03 18:21:43 发布

转载最新推荐文章于 2021-08-03 18:21:43 发布 · 1k 阅读

javascript学习笔记专栏收录该内容

75 篇文章

订阅专栏

本文深入探讨了在不同浏览器中获取网页元素样式的多种方法，包括使用`obj.style`、`obj.currentStyle`和`window.getComputedStyle`等。文章还提供了一个通用的样式获取函数，确保了代码在IE和DOM环境下都能正确运行。

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

转载地址: http://blog.youkuaiyun.com/hulefei29/article/details/3694884

function getCurrentStyle (obj, cssName) {     
    if (obj.currentStyle) { 
        return obj.currentStyle[cssName];     
    } 
    else if (window.getComputedStyle) { 
        cssName = cssName.replace (/([A-Z])/g, "-$1").toLowerCase ();        
        return document.defaultView.getComputedStyle(obj,null)[cssName];     
    }      
    return null;
}

obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."）.

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。4 b- L. ^/ @# b0 w- y5 X

另：可以将上面的方法简化为:

function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
    return obj.currentStyle? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];
}