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

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

然后在javascript脚本中：

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

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

修改

我正在访问正确的元素，但它不会让我将显示样式从无覆盖覆盖。出于某种原因！重要的是没有工作......

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

这使得内部div实际上不是p代码的子代。尝试使用其他元素，例如div s，作为外部容器。

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>

按类名动态更改css样式

2 个答案:

更新