javascript - Javascript OnClick 更改各种元素链接颜色

Question

我希望在单击其他链接时更改它们的链接。例如，如果用户单击 AZ，它将更改 0-9 的颜色。

<a href="" id="list_users_title" onclick="document.getElementById('oneline a').style.color = '#414042'; document.getElementById('list_users_title a').style.color = '#B91200';">A-Z</a>
<a href="" id="oneline" onclick="document.getElementById('oneline a').style.color = '#B91200'; document.getElementById('list_users_title a').style.color = '#414042';">0-9</a>

我可以用颜色来做到这一点，但这会覆盖我仍然想使用的 a:hover。

任何帮助，将不胜感激

Answer 1

您的问题是，在 javascript 的帮助下，您正在将内联 css 添加到a标签中。内联 css 比 instyle标记具有更高的优先级。

这里的解决方案 -

<div id='style'></div>

<a href="" id="list_users_title" onclick="document.getElementById('style').innerHTML = '<style>ADD CSS HERE</style>';">A-Z</a>

这不会添加内联 CSS

Answer 2

使用时，getElementById您应该传入所需元素的id。所以做这样的事情document.getElementById('oneline')而不是document.getElementById('oneline a').

编辑

如果您不想覆盖样式，请使用 onclick 事件向元素添加一个类（例如“clicked-by-oneline”），而不是直接应用样式。然后使用样式表定义一些规则，如下所示：

#oneline.clicked-by-oneline { color: #414042; }
#list_users_title.clicked-by-oneline { color: #B91200; }

使用级联来准确控制这些样式覆盖将如何交互。