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(' ')}
`;using the DOM selector and then css properties, like this:
const styling = document.querySelector('.text');
styling.style.backgroundColor = 'yellow';
styling.style.color = 'red';
var elements = document.getElementsByClassName('ayahNumber'); // get all elements
for(var i = 0; i < elements.length; i++){
elements[i].style.backgroundColor = "black";
}