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

Question

我想知道当一个类具有特定值时是否可以更改它的背景颜色。

示例：如果元素包含 '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

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

我使用了一个映射对象，它很有用，否则您也可以进行单独的if 检查。 innerText 是您可以用来比较 HTML 元素的内部 Text 的属性。

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 2

...几乎所有人都这么说。这是我的方法：

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 3

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

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

然后是您要更改检测到的类的背景的部分。 您可以将 if 条件设为

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

Answer 4

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

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

Answer 5

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