Find css class on div and get values

Question

I'm trying to find a class on a div (where the value will always end in 0bg), given a partial string, and then get its background style value.

For example:

.xx-color-100bg{
    background-color: #323334;
}

<div class="heading xx-color-100bg"></div>

document.querySelectorAll(".heading").classList.contains("0bg").style.background

The solution above errors with Cannot read properties of undefined (reading 'contains')

How can I find the necessary class and grab it's background-color value?

querySelectorAll() returns a NodeList. classList is undefined on NodeList (it is found on a DOMElement — Joey Carlisle
– Joey Carlisle, Commented Apr 12, 2022 at 18:40
I wonder if this is good enough: .querySelectorAll('[class$="0bg"]') — Wyck
– Wyck, Commented Apr 12, 2022 at 18:42
You can include the 0bg in your querySelector, ".heading[class$='0bg']" — James
– James, Commented Apr 12, 2022 at 18:43

0xLogN · Accepted Answer · 2022-04-12 18:40:06Z

1

querySelectorAll() returns a NodeList, so you can't use classList. You need to loop over the DOMElements in the list or just assume the first one is what you need:

document.querySelectorAll(".heading").forEach(e => {
    // do something with e.classList
});

// OR

document.querySelectorAll(".heading")[0].classList // the first element

answered Apr 12, 2022 at 18:40

0xLogN

3,8831 gold badge20 silver badges40 bronze badges

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

Comments

Matt · Accepted Answer · 2022-04-12 18:46:53Z

0

Figured out the solution right after posting the question:

window.getComputedStyle(document.querySelector(".heading[class*='0bg'")).backgroundColor;

answered Apr 12, 2022 at 18:46

Matt

1,6215 gold badges31 silver badges71 bronze badges

Collectives™ on Stack Overflow

Find css class on div and get values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related