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

Question

我想知道是否可以在 class 具有特定值时更改它的背景颜色。

示例：如果元素包含 '1' 将 bg-color 更改为红色，如果它包含 '2' 将 bg-color 更改为绿色，等等。

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

我应该如何编写我的 JavaScript 代码来实现这个效果？

Answer 1

只需遍历您的元素，检查innerText并设置元素样式。

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

Answer 2

您可以在集合中获取所有相关的class元素（使用getElementsByClassName ），然后将其转换为array （使用扩展运算符）。 然后，您可以使用style.backgroundColor属性分配背景颜色。

我使用了映射 object，这可能很有用，否则您也可以进行单独的if检查。 innerText是可用于比较 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>

Answer 3

1）您可以使用textContent获取文本并匹配它并将颜色设置为

 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）您也可以在这里使用Map作为：

 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

......几乎其他人都说过。 这是我的方法：

 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

首先，您需要检查 class 是否有价值。 您必须知道 getElementsByClassName() 返回一个数组，因此您必须访问第一个元素（如果有的话）。 然后尝试通过此 javascript 代码访问值属性，该代码根据值的长度检测值。

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

然后是更改检测到的 class 背景的部分。 您可以使 if 条件为

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