I've got this code:
const all = document.querySelectorAll('div');
let variable = 'fruits';
all.forEach((item) => {
if(item.classList.contains(variable)) {
item.style.backgroundColor = 'red';
}
});
<div class="fruits">
Fruits
</div>
<div class="fruits-green">
Green fruits
</div>
and I was wondering if theres to use classList.contains with a string/word partially?
Obviously what I'm trying to achieve is to get fruits-green styled too, since it contains fruits-green
I know there are CSS selectors for that, but given that my fruits variable will change with other JS functions, I'd like this to be vanilla JS too.
Any advice is much appreciated. Thanks!
document.querySelectorAll('div[class*=fruits]')
?document.querySelectorAll()
call.