类 CSS 属性返回

Question

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

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

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

它会通过 javascript 随时应用于 element。现在我想将此 elements childrens' color 更改为 parents' (.global) 元素背景颜色。

有没有办法从 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 中是否已经内置了一个函数，而我忽略了它？

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

PS 也可以是 DOM Level 3..（HTML5'ish..）

Answer 1

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

$(document).ready(function(){    

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

};

这是 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 的另一个详细讨论的主题在这里。

事实证明，有一种非常有趣且有用的类处理方式，几乎可以在所有浏览器中使用，特别是 IE8 及更低版本除外。