Class CSS property return

How would one return a class computed CSS property/property array?

Like, if I have a class defined in CSS:

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

It's applied on the go with javascript to an element. Now I want to change this elements childrens' color to parents' (.global) element background-color.

And is there a way to read CSS properties from a previously defined class in a style tag or externally included *.css?

Something like, getCSSData([span|.global|div > h1]); (where the passed variable is a CSS selector, that gets data for exactly matching element) that would return an object with each property in it's own accessible variable?

Something like:

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

And the usage for my previously explained example would be:

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

Is there a function built in already in javascript/jquery and I've overlooked it?

If not, what should I look for to make one?

P.S. Can be DOM Level 3 too.. (HTML5'ish..)

---

If you want to grab the background color of the parent element and then apply that color to the font of all of it's children you could use the following code.

$(document).ready(function(){    

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

};

Here's an example on jsFiddle.net

---

You can access the computedStyle of an element which includes all inherited style values, here is a example that outputs the computed style of a div element in the console.

<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>

You can find more information here: http://help.dottoro.com/ljscsoax.php

---

If I understand your question correctly, you'd like to find a general approach to modifying a class; and to have that modifcation affect all of the instantiations of that class. This was the subject of another detailed discussion on SO over here.

There turned out to be an extremely interesting and useful treatment of classes that works in almost all browsers, notably excepting IE8 and below.