Question

我想将班级a中speed的字体颜色更改为red。
（a无法获得自己的ID或类）

如何使用JavaScript执行此操作？

<!DOCTYPE html>
<html>
<body>
<div class="gun">
<a href="#">Hello World!</a>
</div>


<div class="speed">
<a href="#">Hello World!</a>
</div>


<script>
... 
</script>

<div>

</body>
</html>

Answer 1

使用querySelector的早期发布的答案是正确的，假设您只有一个<a>。那是因为它只选择与选择器匹配的第一个元素。

如果您的DOM中碰巧有多个.speed a个实例，则可以使用document.querySelectorAll。这将获得与选择器匹配的所有元素的可迭代列表;然后你可以遍历所有这些。

var linksToChange = document.querySelectorAll(".speed a")
linksToChange.forEach(function(toChange) {
  toChange.style.color = "red";
});

<div class="gun">
  <a href="#">Hello World!</a>
</div>
<div class="speed">
  <a href="#">Hello World #1!</a>
  <div id="someDiv">
    <a href="#">Hello World #2!</a>
  </div>
</div>

<div class="speed">
  <a href="#">Hello World #3!</a>
</div>

如果您只想突出显示<a>元素的直接子元素的.speed，则可以将选择器字符串更改为.speed > a。在上面的例子中，这将使“Hello World＃2！”保持默认颜色，因为它嵌套在div。

中

另外，我假设您想要动态更改链接而不是简单地从一开始就将其设置为红色。正如其他人所指出的那样，如果您希望链接只是红色并保持红色，那么您应该使用CSS而不是JavaScript来设置样式。

Answer 2

在我的拙见中，不使用课程来应用风格是一个可怕的选择。您没有指定触发样式更改的内容，因此假设您在加载时需要它。

＆＃13;

document.querySelector('.speed>a').style.color = "red";

＆＃13;

<div class="gun">
<a href="#">Hello World!</a>
</div>


<div class="speed">
<a href="#">Hello World!</a>
</div>

＆＃13;

由于JavaScript样式是＆＃34;隐藏＆＃34;从CSS文件中，如果需要更改需要更改代码，例如将颜色从红色更改为蓝色，它们是维护样式的可怕方法。

您应该使用现有的课程。

＆＃13;

.speed>a{
  color: red;
}

＆＃13;

<div class="gun">
<a href="#">Hello World!</a>
</div>


<div class="speed">
<a href="#">Hello World!</a>
</div>

＆＃13;

Answer 3

使用document.querySelector('.speed a')选择它，然后将style.color更改为红色。

有关选择器的更多信息，请参阅此CSS selectors

＆＃13;

document.querySelector('.speed a').style.color = 'red';

＆＃13;

<div class="gun">
  <a href="#">Hello World!</a>
</div>
<div class="speed">
  <a href="#">Hello World!</a>

</div>

＆＃13;

使用JavaScript

3 个答案: