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?

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

Answer 1

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