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 · Accepted Answer · 2011-09-22 20:27:56Z

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, 2011 at 20:27

answered Sep 22, 2011 at 20:22

Cory Danielson

14.5k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tomsseisums Over a year ago

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();.

Cory Danielson Over a year ago

You want to get all of the values of what?

Robin Andersson · Accepted Answer · 2011-09-22 20:31:33Z

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

Community · Accepted Answer · 2017-05-23 12:27:31Z

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Sep 22, 2011 at 20:33

Pete Wilson

8,7246 gold badges42 silver badges52 bronze badges

1 Comment

tomsseisums Over a year ago

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.

Collectives™ on Stack Overflow

Class CSS property return

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related