Question

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

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

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

它随身携带javascript到element。现在，我想将此elements 孩子的 color更改为父母的（.global）元素background-color。< / p>

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

如果没有，我应该寻找什么呢？

P.S。也可以是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

您可以访问包含所有继承样式值的元素的computedStyle，这是一个在控制台中输出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及以下版本。

类CSS属性返回

3 个答案: