如何使用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 中本來是紅色的活動顏色。 其他鏈接是黑色的，懸停時變為藍色，活動時變為紅色。 我希望新的超鏈接在活動時為藍色並變為紅色。

Answer 1

似乎沒有編程方式來定位 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';
  });

Answer 2

您可以在鏈接上設置一個 ID 並使用 css 定位它

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