通过类名动态改变css样式

Posted 2023-03-16

【中文标题】通过类名动态改变css样式

【英文标题】：Dynamically change css style by class name

【发布时间】：2015-09-25 13:56:54

【问题描述】：

<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 无法正常工作...

【问题讨论】：

当你说 Java 时，你是指 JavaScript 吗？

没有。它是在 Java 中的。 .

你在使用某种模板框架吗？

您是否在浏览器中查看过 resulting html DOM 并检查是否应用了样式？我们会知道这是 CSS 问题还是 JS 问题。

好的。因此，在我的代码中，例如在上面的示例中，类 typeA 的样式显示为“无”。我正在尝试将“build2”的样式显示设置为“阻止”以覆盖它。

【参考方案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>

【参考方案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>

【讨论】：

这仍然不起作用。在浏览器中查看生成的 HTML DOM，它发现我试图更改显示但被划掉/不活动并显示 typeA 想要“无”。

将 java 字符串转换为 javascript 变量是否正确？ var tempKey = ""

@kb_：查看我的更新。不，如果您的字符串恰好包含双引号字符 (")，那么您刚刚发布的将 java 字符串转换为 javascript 变量的代码将会中断。我建议您使用某种 JSON 转换器库。 var tempKey = <%=JsonWriter.objectToJson(tempKey)%>;

我会尝试更改

@kb_: 大概 tempKey 是一个 Java 字符串吧？当 JSON 序列化时，“say "hello"”的正确 JSON 表示是 "say \"hello\""，这正是您希望在渲染输出中显示的内容。