如果 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) and then convert it to an array (using spread 运算符）。然后，您可以使用 style.backgroundColor 属性.

分配背景颜色

我使用了一个映射对象，它可能很有用，否则您也可以进行单独的 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（） returns 一个数组，所以你必须访问第一个元素（如果有的话）。然后尝试通过此 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";
   }

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

Change background-color if class contains a value

javascript

background-color