在 JavaScript 中获取元素样式表样式答案

【问题标题】：Get Element StyleSheet Style in JavaScript在 JavaScript 中获取元素样式表样式
【发布时间】：2008-12-27 19:58:36
【问题描述】：

我一直在使用来自 Pro JavaScript Techniques 的 John Resig 的 getStyle 函数来获取元素的样式：

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

但是，如果没有指定样式，此方法会返回元素的默认样式：

http://johnboxall.github.com/test/getStyle.html

alt text http://img.skitch.com/20081227-8qhxie51py21yxuq7scy32635a.png

是否可以只获取元素的样式表指定样式（如果样式未定义则返回 null）？

更新：

我为什么需要这样的野兽？我正在构建一个允许用户设置元素样式的小组件。可以应用的样式之一是text-align - left、center、right - 使用getStyle 未设置样式的元素默认为center。这使得无法判断元素是否居中是因为用户希望它居中，还是因为这是默认样式而居中。

【问题讨论】：

标签： javascript css stylesheet

【解决方案1】：

是否可以只获取 stylesheet 指定样式的元素（如果样式返回 null 未定义）？

这实际上就是您呈现的例程所做的。问题是，在大多数情况下，大多数样式不是未定义的——它们是由单个浏览器的内部样式表继承和/或定义的。

您可以通过大量的努力，在当前视图中的所有样式表中迭代所有定义相关样式的规则文档，为有问题的元素评估它们，如果没有应用......并且如果没有应用到父元素（或者这个特定的样式没有被继承）......那么认为它是未定义的。这会很慢，而且难以置信容易出错。我不建议尝试。

也许你最好退后一步，问问你为什么需要这样的东西？

【讨论】：

感谢 Shog 的深思熟虑的回答 - 我最终将 Pez 的想法与您的建议结合起来，尝试以不同的方式思考它！

【解决方案2】：

也许您的组件可以包装它所控制的样式？然后当通过组件设置样式时，组件知道用户想要什么。

【讨论】：