如何使用JavaScript更改超链接的活动颜色？

Question

我正在尝试使用JavaScript添加一系列<p<a/a>/p>元素，并希望使用JavaScript更改链接的活动颜色。我该如何做？我不能在CSS文件中使用a:active更改所有超链接的颜色，因为我有一组其他链接，我想要不同的颜色，我目前正在使用CSS来解决这个问题。

以下是我的JavaScript添加内容：

    var supertag = document.createElement("p");
    var tag = document.createElement('a');
    var text = document.createTextNode("Join a New Community!");
    tag.appendChild(text);
    tag.href = "http://localhost:8088/communities_index/communities_index.html";
    tag.style.color = "blue";
    supertag.appendChild(tag);
    var element = document.getElementById("globalCommunities");
    element.appendChild(tag);

我可以将超链接的颜色更改为蓝色，但这样就会失去其活动颜色（本来应该是红色）到css。其他链接是黑色的，在悬停时变成蓝色，在活动时变成红色。我希望新的超链接是蓝色的，并在活动时变成红色。

- Yun Jae Jung

---

你能在CodePen上分享代码片段或提供完整的HTML、CSS和JS代码吗？ - undefined

哎呀，我的 JavaScript 代码中充满了与服务器数据的交互，所以变得有点复杂。我只是想检查一下是否已经存在一个 JavaScript 方法可以处理这个问题，就像 tag.style.color 这样的。 - undefined

尝试使用 document.getElementById("myDIV").classList.add("mystyle"); 来添加样式。可以参考 https://www.w3schools.com/jsref/prop_element_classlist.asp 或者使用 toggle 替代 add。 - undefined

看起来很有希望，但这只能在按钮被点击后才能起作用，而且我只想在按钮处于活动状态时改变颜色。在完全点击之前。 - undefined

Answer 1

你可以在链接上设置ID，并使用CSS来定位它。

#my-id {color: blue}
#my-id:active {color: red}

- Allan J.

Answer 2

似乎没有编程方式可以在JavaScript中针对CSS的:active状态进行定位。一种方法是监听相关链接的mouseup和mousedown事件，并通过样式设置它们的颜色。

  // Grab your link, here an element with ID my-link
  var a = document.querySelector('#my-link');
  // Set mousedown event listener
  a.addEventListener('mousedown', () => {
    // Use style to set element color
    a.style.color = 'red';
  });
  // Set mouseup event listener
  a.addEventListener('mouseup', () => { 
    // Use style to set element color
    a.style.color = 'blue';
  });

- sprite421