如果 class 包含值，则更改背景颜色

Question

I'm wondering if I can change the background color of a class when it has a specific value.

Example: if the element contains '1' change bg-color to red, if it contains '2' change bg-color to green, 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;
}

How should I write my JavaScript code to accomplish this effect?

Answer 1

Just loop through your elements, check the innerText , and set the element style.

document.querySelectorAll('.skill-points').forEach(div => {
  if (div.innerText.contains('1')) div.style.backgroundColor = 'red';
  ...
});

Answer 2

You can get all your relevant class elements in a collection (using getElementsByClassName ) and then convert it to an array (using spread operator). You can then assign background colours using style.backgroundColor property.

I have used a mapping object, that can be useful otherwise you can do individual if checks too. innerText is the property you can use to compare the inner Text of the HTML elements.

 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>

Answer 3

1) You can get text using textContent and match it and set the color as

 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) You can also make use of Map here as:

 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 -->

Answer 4

... what pretty much everyone else said. Here's my approach:

 const valueClassMap = { 1: "bg-red", 2: "bg-green", 3: "bg-yellow" }; document.querySelectorAll(".skill-points").forEach(el => { const content = el.textContent.trim(); if(valueClassMap.hasOwnProperty(content)){ el.classList.add(valueClassMap[content]); } });

 .bg-red{ background: red }.bg-green{ background: green }.bg-yellow{ background:yellow }

 <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 -->

Answer 5

First you need to check if class have value. you have to know that getElementsByClassName() returns an array so you have to access first element (if there is any). Then try accessing value property through this javascript code which is detecting the value based on the length of the value.

  var id = document.getElementsByClassName("classname");
  if (id.length > 0) {
  var x = id[0].value;
  alert(id[0].value);
  }

Then the part where you gonna change the background of the detected class. You can make if conditions as

   if x = x {
   document.getElementsByClassName('classname').style.backgroundColor = "red";
   }