使用JavaScript更改嵌套HTML元素的字体颜色

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

使用document.querySelector选择a标签并使用style.color更改颜色：

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

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

Answer 2

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

如果您的DOM中碰巧有多个.speed a实例， .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>

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

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

Answer 3

您可以使用document.querySelecotr()进行选择，然后将样式更改为所需的样式

document.querySelector(".speed a")

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

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

Answer 4

在我的拙见中，不使用课程来应用样式是一个糟糕的选择。 您没有指定触发样式更改的内容，因此假定您希望在加载样式时进行更改。

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

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

由于JavaScript样式是从CSS文件中“隐藏”的，并且需要更改代码（例如，将颜色从红色更改为蓝色）时，需要更改代码，因此这是一种糟糕的样式维护方式。

您应该改用现有的类。

 .speed>a{ color: red; }

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

Answer 5

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

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

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

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

使用JavaScript更改嵌套HTML元素的字体颜色

问题描述

5 个解决方案

解决方案1
2 已采纳 2018-05-09 15:24:54

解决方案2
1 2018-05-09 15:46:01

解决方案3
0 2018-05-09 15:25:23

解决方案4
0 2018-05-09 15:27:09

解决方案5
0 2018-05-09 15:39:13

使用JavaScript更改嵌套HTML元素的字体颜色

问题描述

5 个解决方案

解决方案1 2 已采纳 2018-05-09 15:24:54

解决方案2 1 2018-05-09 15:46:01

解决方案3 0 2018-05-09 15:25:23

解决方案4 0 2018-05-09 15:27:09

解决方案5 0 2018-05-09 15:39:13

解决方案1
2 已采纳 2018-05-09 15:24:54

解决方案2
1 2018-05-09 15:46:01

解决方案3
0 2018-05-09 15:25:23

解决方案4
0 2018-05-09 15:27:09

解决方案5
0 2018-05-09 15:39:13