将 child link 颜色更改为 javascript

Question

我的网页带有 header 和 body 以及页脚单击切换按钮时，我放置了一个脚本将主题从暗更改为亮。但并非所有链接都具有相同的颜色，例如我希望 header 的链接为“白色”，body 的链接为“银色”，

所以对于 header 我有这样的定义：

#header a{color:black}
#header a:hover{color:red}

我可以将文本颜色更改为：

var hdr = document.getElementById("header");
hdr.style.color = "#white";

我的问题是如何使用 javascript 更改元素 header 的 child “a” 的颜色，就像我使用 header 一样自己？

谢谢。

Answer 1

我相信您可以通过最初使用 getElementsByClassName() 获取 'family' 来调用 child 元素。因此，不要使用 id，而是将其更改为 class，然后您就可以通过这种方式获取层次结构。然后你可以使用索引 select 正确的 child.

这是一个可能有用的 link。

How to Change Text Color on a Div Child Element in JavaScript

Answer 2

在 <body> 上切换 class，然后创建在其中使用 class 的特定规则。

类似于：

#header a {color: black}
#header a:hover {color: red}

.dark #header a {color: white}
.dark #header a:hover {color: pink}

Answer 3

正如您所问 - 您想要 select header id，并更改其中的所有 a 标签。

因此，您正在寻找 select 或 header id 中的 a 标签。

Select 所有 a 锚标签，并用循环将所有标签更改为您想要的颜色。

let headerAnchorTags = hdr.getElementsByTagName('a'); //you have already selected hdr
        
for(var i=0; i<headerAnchorTags.length; i++){
   headerAnchorTags[i].style.color = "black";
  }

将 child link 颜色更改为 javascript

Change child link color with javascript

javascript

anchor

themes

properties