Me pregunto si puedo cambiar el color de fondo de una clase cuando tiene un valor específico.
Ejemplo: si el elemento contiene '1' cambie bg-color a rojo, si contiene '2' cambie bg-color a verde, etc.
HTML:
<div class="skill-points"> 1 </div> <!-- BG color = red --> <div class="skill-points"> 2 </div> <!-- BG color = green --> <div class="skill-points"> 3 </div> <!-- BG color = yellow -->CSS:
.skill-points { width: 50px; padding: 4px; margin: 4px; border: 1px solid #000; text-align: center; }¿Cómo debo escribir mi código JavaScript para lograr este efecto?
Puede obtener todos sus elementos de class relevantes en una colección (usando getElementsByClassName ) y luego convertirlos en una array (usando el operador de distribución ). Luego puede asignar colores de fondo usando la propiedad style.backgroundColor .
He usado un objeto de mapeo, que puede ser útil; de if contrario, también puede hacer comprobaciones individuales. innerText es la propiedad que puede usar para comparar el texto interno de los elementos HTML.
let mapping = { '1' : 'red', '2' : 'green' , '3': 'blue' }; [...document.getElementsByClassName('skill-points')].forEach( x => { x.style.backgroundColor = mapping[x.innerText]; }); .skill-points { width: 50px; padding: 4px; margin: 4px; border: 1px solid #000; text-align: center; } <div class="skill-points"> 1 </div> <!-- BG color = red --> <div class="skill-points"> 2 </div> <!-- BG color = green --> <div class="skill-points"> 3 </div>Simplemente recorra sus elementos, verifique el innerText y configure el estilo del elemento.
document.querySelectorAll('.skill-points').forEach(div => { if (div.innerText.contains('1')) div.style.backgroundColor = 'red'; ... });1) Puede obtener texto usando textContent y combinarlo y establecer el color como
const allSkillPoints = document.querySelectorAll(".skill-points"); allSkillPoints.forEach(el => { const text = +el.textContent.trim(); if (text === 1) el.style.backgroundColor = "red"; else if (text === 2) el.style.backgroundColor = "green"; else if (text === 3) el.style.backgroundColor = "yellow"; }) .skill-points { width: 50px; padding: 4px; margin: 4px; border: 1px solid #000; text-align: center; } <div class="skill-points"> 1 </div> <!-- BG color = red --> <div class="skill-points"> 2 </div> <!-- BG color = green --> <div class="skill-points"> 3 </div> <!-- BG color = yellow --> 2) También puede hacer uso de Map aquí como:
const allSkillPoints = document.querySelectorAll(".skill-points"); const map = new Map() map.set(1, "red") .set(2, "green") .set(3, "yellow"); allSkillPoints.forEach(el => { const text = +el.textContent.trim(); el.style.backgroundColor = map.has(text) ? map.get(text) : "white"; }) .skill-points { width: 50px; padding: 4px; margin: 4px; border: 1px solid #000; text-align: center; } <div class="skill-points"> 1 </div> <!-- BG color = red --> <div class="skill-points"> 2 </div> <!-- BG color = green --> <div class="skill-points"> 3 </div> <!-- BG color = yellow -->