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

Question

我想在点击其他链接时更改链接。例如，如果用户点击A-Z，它将改变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的帮助下，您正在向a标记添加内联css。内联css的优先级高于style代码中的优先级。

这里的解决方案 -

<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; }

使用级联来精确控制这些样式覆盖的交互方式。