类 CSS 属性返回

Question

如何返回一个类计算的 CSS 属性/属性数组？

如果我在 CSS 中定义了一个类：

.global {
    background-color: red;
    color: white;
    text-shadow: 0px 1px 1px black;
}

它通过 javascript 在旅途中应用到 element。现在我想将这个 elements childrens' color 更改为 parents' (.global) 元素 background-color。

有没有办法从 style 标记或外部包含的 *.css 中的先前定义的类中读取 CSS 属性？

类似于getCSSData([span|.global|div > h1]);（其中传递的变量是 CSS 选择器，它获取完全匹配元素的数据）会返回一个对象，其中每个属性都包含在它自己的可访问变量中？

类似：

cssdata = {
    selector : '.global',
    properties : {
        backgroundColor : 'red',
        color : 'white',
        textShadow : '0px 1px 1px black'
        // plus inherited, default ones (the ones specified by W3..)
    }
}

我之前解释的示例的用法是：

// just an example to include both, jQuery usage and/or native javascript
var elements = $('.global').children() || document.getElementsByClassName('.global')[0].children;
var data = $('.global').getCSSData() || document.getCSSData('.global');
return elements.css('color', data.properties.backgroundColor) || elements.style.backgroundColor = data.properties.backgroundColor;

javascript/jquery 中是否已经内置了一个函数而我忽略了它？

如果没有，我应该寻找什么来制作？

附：也可以是 DOM Level 3.. (HTML5'ish..)

Answer 1

如果您想获取父元素的背景颜色，然后将该颜色应用于所有子元素的字体，您可以使用以下代码。

$(document).ready(function(){    

    var global = $('.global');
    var bgColor = global.css('background-color');
    global.children().css('color', bgColor);

};

Here's an example on jsFiddle.net

Answer 2

您可以访问包含所有继承样式值的元素的计算样式，这是一个在控制台中输出 div 元素的计算样式的示例。

<script type="text/javascript"> 
    if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", listComputedStyles, false);
    }

    function listComputedStyles() {
        var element = document.getElementById("myDiv");
        var properties = window.getComputedStyle(element, null);

        for (var i = 0; i < properties.length; i++)
        {
            var value = window.getComputedStyle(element, null).getPropertyValue(properties[i]);             
            console.log(properties[i], value);
        }
    }

</script>

<div id="myDiv" style="background-color: blue; height: 500px;"></div>

您可以在这里找到更多信息：http://help.dottoro.com/ljscsoax.php

Answer 3

如果我正确理解您的问题，您希望找到修改类的通用方法；并让该修改影响该类的所有实例化。这是关于 SO over here 的另一个详细讨论的主题。

事实证明，对几乎所有浏览器都有效的类的处理非常有趣和有用，尤其是除了 IE8 和更低版本。