通过类名动态改变css样式

Question

<p class="typeA build1"> Build 1 <div class="b">Complete</div></p>
<p class="typeA build2"> Build 2 <div class="b">Incomplete</div></p>
//about 6 or 7 more builds...

我需要访问 build# 的样式来更改显示...最初都是隐藏的，但我有创建字符串的 java 代码（例如“build2”和“build3”）。 我在我的 JAVA 代码中将该字符串保存为“tempKey”。

然后在 javascript 脚本中：

var tempKey = "<%=tempKey%>";
document.getElementsByClassName(tempKey).style.display = "block !important";

我还尝试添加一个“活动”类，并让该类具有相同的样式（块！重要），加上许多不同的方法来解决这个问题。看来我只是无法在 javascript 函数中使用 java 字符串访问元素。

编辑：

我正在访问正确的元素，但它不会让我将显示样式从无覆盖到阻塞。由于某种原因 !important 无法正常工作...

Answer 1

请记住，选择器返回一个数组，因此您需要提供索引 [0]。

var i = 3;
var tempKey = "build" + i;
var el = document.getElementsByClassName(tempKey)[0];
el.style.backgroundColor = "#FFCC00";

ul.type-list {
  list-style-type:none;
  padding:0;
}

ul.type-list li.typeA {
  border-bottom: 2px solid #99AACC;
}
ul.type-list li span.b {
  display:inline-block;
  width: 100px;
  float:right;
}

<ul class='type-list'>
  <li class="typeA build1">Build 1
    <span class="b">Complete</span>
  </li>
  <li class="typeA build2">Build 2
    <span class="b">Incomplete</span>
  </li>
  <li class="typeA build3">Build 3
    <span class="b">build3</span>
  </li>
  <li class="typeA build4">Build 4
    <span class="b">build4</span>
  </li>
</ul>

Answer 2

getElementsByClassName() 产生一个项目数组。您需要对其进行索引：

var element = document.getElementsByClassName('build1')[0];
console.log(element.style);
element.style.display = "block";
console.log(element.style);

.typeA {display:none;}

<p class="typeA build1"> Build 1 <div class="b">Complete</div></p>
<p class="typeA build2"> Build 2 <div class="b">Incomplete</div></p>

并且不需要!important，因为单个元素的样式会取代它所继承的所有其他样式。

更新

这里真正的问题是 HTML 规则不允许 <p> 元素包含 <div> 元素，因此浏览器会自动为您关闭 <p> 标签，从而生成这个 DOM：

<p class="typeA build1"> Build 1 </p>
<div class="b">Complete</div>
<p></p>
<p class="typeA build2"> Build 2 </p>
<div class="b">Incomplete</div>
<p></p>

这使得您的内部divs 实际上不是您的p 标签的子级。尝试为您的外部容器使用另一个元素，例如 divs。

var element = document.getElementsByClassName('build1')[0];
console.log(element.style);
element.style.display = "block";
console.log(element.style);

.typeA {display:none;}

<div class="typeA build1"> Build 1 <div class="b">Complete</div></div>
<div class="typeA build2"> Build 2 <div class="b">Incomplete</div></div>