时间戳

首页 > 解决方案 > 将 ID 保存在变量中并为其添加样式

javascript - 将 ID 保存在变量中并为其添加样式

问题描述

我想随机突出显示<p>带有id=JShighlight. 它应该闪烁一次，然后另一个随机选择的单词应该闪烁。**我无法将所需的 css 样式添加到 ID。

这些单词嵌套在具有唯一 id 的 span 中，例如id="one"oder id="two"。喜欢：

<p id="JShighlight"> <span id="one">Lorem </span><span id="two">Ipsum </span><span id="three">Dolores</span></p>

为了随机选择一个单词，我用 JShighlight 的子节点构建了一个数组。并称它为 childNodeArray

let childNodeArray = document.getElementById('JShighlight').children;

然后我随机选择了一个索引：

  let i = Math.floor(Math.random() * childNodeArray.length);

变量名称保存随机选择的 ID。

let name = childNodeArray[i].id;

对于这个随机选择的单词/Id我想添加某种样式，以便该单词闪烁一次。我试过了：

name.classList.add("blinking");

（.blinking 是 css 类：

.blinking {
    animation: blinkingText 0.6s 1;
    /* animation-iteration-count: 1; */
}

)

但它不起作用。什么“有效”是：

document.getElementById(name).style.color = "red";

为什么我可以在后一种情况下而不是在前一种情况下将变量作为参数传递？如何将 css 类附加到变量 ID？

标签： javascriptdom

解决方案

在第一种情况下，name 是字符串而不是元素。
你可以做的是：

name = document.getElementById(name);
name.classList.add("blinking");

推荐阅读