'How can i add style to the element in javascript? [duplicate]

I have this piece of code inside my javascript, I want to select the element by the class name and then be able to style it, how can I do that?

const versesHtml = `              
                ${verses.map( (v, i) => `<li class="text">${v.text_uthmani}</li> <li class="ayahNumber">{${i+1}}</li>`).join(' ')}
               
                
               
            `;
javascripthtmlcss


Solution 1:[1]

var elements = document.getElementsByClassName('ayahNumber'); // get all elements
    for(var i = 0; i < elements.length; i++){
        elements[i].style.backgroundColor = "black";
    }

Solution 2:[2]

using the DOM selector and then css properties, like this:

const styling = document.querySelector('.text');
styling.style.backgroundColor = 'yellow';
styling.style.color = 'red';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dinesh oz
Solution 2 Gabriele Sabatino

Related Questions