Read and print the CSS values of a class with pure Javascript

Question

I am trying to create a function, which:

Grabs an element with a specific data element, i.e. "data-findDeclaration = element"
From this element, the class is read
It reads out all the css values appointed to this class
Displays inside another specific data element (i.e. data-writeDeclaration="element") all the classes' rules/values.

Here's where I am so far:

HTML:

    <span class="slap0" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap1" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap2" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

    <span class="slap3" data-finddeclaration="element">The great white fox</span>
    <div class="description" data-writedeclaration="element">

    </div>

JS:

function readOutCssRules() {
var dataElement = document.querySelectorAll('[data-finddeclaration="element"]');
var classRules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
var writeDataElement = document.querySelectorAll('[data-writedeclaration="element"]');

for (var i = 0; i < dataElement.length; i++) {
    dataElement[i].className;
    if (classRules[i].selectorText == "." + dataElement[i].className) {
        console.log(classRules[i].cssText);

        writeDataElement[i].innerHTML = classRules[i].cssText;
    }
}


}
readOutCssRules();

But the function is not working as expected. Any ideas? Thanks in advance.

I do get the contents of the class, but if I add more elements to the html structure, it won't display them. Plus, I need to see the rules and not the class names, properly displayed inside the corresponding div. I am not allowed to use jQuery, otherwise this wouldn't be much of a problem :) — Sidius
– Sidius, Commented Jun 14, 2016 at 6:59
Is that specifically what you want to accomplish? You could just append the class on. — JackHasaKeyboard
– JackHasaKeyboard, Commented Jun 14, 2016 at 7:01
@HudsonPH If I don't check it, it unloads the whole stylesheet... :/ — Sidius
– Sidius, Commented Jun 14, 2016 at 7:17

Ygalbel · Accepted Answer · 2016-06-14 07:26:48Z

1

Your code is working.

You just have to remove one line in the for loop:

for (var i = 0; i < dataElement.length; i++) {
    //dataElement[i].className;   --> remove this
    if (classRules[i].selectorText == "." + dataElement[i].className) {
        console.log(classRules[i].cssText);

        writeDataElement[i].innerHTML = classRules[i].cssText;
    }
}

After that changes it will work, as you can see in this fiddle.

answered Jun 14, 2016 at 7:26

Ygalbel

5,5491 gold badge27 silver badges33 bronze badges

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

5 Comments

Sidius Over a year ago

Sadly not... The CSS is displayed only if the classes are present and if I add more elements, the newer rules are not displayed at all.

Ygalbel Over a year ago

Can you explain what you try to achieve?

Sidius Over a year ago

The function is called, and searches through the HTML for the tags data-finddeclaration="element". Every time it meets one, it reads out the class that belongs to this element. Through the class, it grabs its rules/values. Then by using data-writedeclaration="element", it posts those rules, without showing the class, just the rules in the brackets.

Ygalbel Over a year ago

So you just have to add a simple string replace: writeDataElement[i].innerHTML = classRules[i].cssText.replace("." + dataElement[i].className, ""); . Check the fiddle again.

Sidius Over a year ago

Implemented it, but the problems that occur, are the following: If inserted in a real CSS stylesheet, with reset rules and all the other stuff, the loop length is not enough to find the classes. Another problem which I already encountered, is that if a class is duplicated, it wont be displayed. Thanks for the effort, I am trying to work with what you posted.

HudsonPH · Accepted Answer · 2016-06-14 08:39:12Z

1

Check this

https://jsfiddle.net/g6tu77mg/1/

var element = classRules[i].cssText
var css= element.substring(element.lastIndexOf("{")+1,element.lastIndexOf("}"));
writeDataElement[i].innerHTML = css;

Output:

The great white fox
color: blue;
The great white fox
color: red;
The great white fox
color: yellow;

answered Jun 14, 2016 at 8:39

HudsonPH

1,8783 gold badges24 silver badges38 bronze badges

3 Comments

Sidius Over a year ago

Implemented it, but the problems that occur, are the following: If inserted in a real CSS stylesheet, with reset rules and all the other stuff, the loop length is not enough to find the classes. Another problem which I already encountered, is that if a class is duplicated, it wont be displayed. Thanks for the effort, I am trying to work with what you posted.

HudsonPH Over a year ago

In this case you need make a validation for every type :/

Sidius Over a year ago

I was afraid of that myself... I hoped there was something I was missing. But thank you so much for your input.

Collectives™ on Stack Overflow

Read and print the CSS values of a class with pure Javascript

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related