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?

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

Cory Danielson · Answer 1 · 2011-09-22T20:27:56.913

3

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

edited Sep 22 '11 at 20:27

answered Sep 22 '11 at 20:22

Cory Danielson

14,314
3
44
51

That's only one value, as I mentioned in the question, I want to get all the values with a single command. You cannot do it with `*.css();`. – tomsseisums Sep 23 '11 at 06:55
You want to get all of the values of what? – Cory Danielson Sep 23 '11 at 13:16

score 2 · Accepted Answer · answered Sep 22 '11 at 20:31

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

score 1 · Answer 3 · edited May 23 '17 at 12:27

1

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.

edited May 23 '17 at 12:27

Community

1
1

answered Sep 22 '11 at 20:33

Pete Wilson

8,610
6
39
51

Well, actually I wanted to retrieve the class properties, but all of em', the default ones, computed ones etc. So I can later use those.. But looks like the post there contains a useful information, to guide me into the right direction. – tomsseisums Sep 23 '11 at 06:53

Class CSS property return

3 Answers3