Class CSS property return

Question

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('.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?

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

Answer 1

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

Answer 2

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

Answer 3

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 . 关于SO的另一个详细讨论的主题。

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