style.color无法更改javascript中的属性

Question

我已经开始学习Javascript的基础知识，在js中，我试图更改元素的颜色，但我无法做到这一点，即使在使用style.color更改颜色后，颜色也不会改变。这是我试图更改颜色的元素的html代码：

<div class="btn"><a href="#">Login</a></div>

这是一个正常的按钮这是我的JS代码：

let k=document.getElementsByClassName("btn");
k[0].style.color="blue";

如果有人知道这里出了什么问题，请帮忙。

我试图使用js文档属性的style.color来更改颜色，我希望th元素能更改颜色

Answer 1

它有效，唯一的问题是您的<div>包含一个已经定义了样式的<a>

let k=document.getElementsByClassName("btn");
k[0].style.color="green"; // Links are already in blue, I put green only to see it quickly

<a class="btn" href="#">Login</a>

Answer 2

JS代码一切正常。但您需要更新链接的颜色，而不是div。尝试更新这样的模板：

<a href="#" class="btn">Login</a>

Answer 3

是否必须按类名进行选择？只要给它一个ID，然后这样做！

<div class="btn" id="bnt1"><a href="#">Login</a></div>
let k=document.getElementsById("btn1");
k[0].style.color="blue";

Answer 4

由于getElementsByClassName返回的是HTML元素的集合，而不是数组，因此我们不能使用

k[0].style.color="blue";

相反，您应该使用id选择器作为：

在a上使用id而不是div

<div><a id="btn" href="#">Login</a></div>

和js:

let k=document.getElementById("btn");
k.style.color="blue";

Answer 5

这不起作用，因为按钮本身没有任何文本。它是a标签。

有多种方法可以解决您的问题：

解决方案1

如果可能的话，你可以把文本放在你的btn中(而不是a标签(，然后像你那样改变button的颜色。

例如：<button class="btn">Hello world</button>

解决方案2

你可以在你的a标签上放一个类，并更新标签的颜色，这里就可以了。

例如：

<button class="btn2">
<a href='#' class="link">Hello world</a>
</button>

然后在JS:中

const link = document.getElementsByClassName("link")[0]
link.style.color="blue"

解决方案3

您可以使用querySelector(此处为文档(检索带有按钮类的a标签

示例：document.querySelector(".btn3 a").style.color="blue"

工作片段：

// solution 1
const btn1 = document.getElementsByClassName("btn")[0]
btn1.style.color = "red";
// solution 2
const link = document.getElementsByClassName("link")[0]
link.style.color="green"
// solution 3
const link2 = document.querySelector(".btn3 a")
link2.style.color="purple"

<button class="btn">
Hello world
</button>
<button class="btn2">
<a href='#' class="link">Login</a>
</button>
<button class="btn3">
<a href='#'>Login</a>
</button>