How to change active color of hyperlink with javascript?

Question

I'm trying to add in a bunch of <p<a/a>/p> elements with javascript and wanted to change the active color of a link with javascript. How would I do that? I can't change the color of all hyperlinks with a:active on the css file because I have a set of other links that I want a different color that I'm currently using css to solve.

These are my additions through 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);

I can change the hyperlink's color to blue but then it loses its active color which would've been red to css. The other links are black which then turn blue on hover and red on active. I'd like the new hyperlink to be blue and turn red when active.

Can you share the code snippets on code pen or provide the whole HTML, CSS, and JS codes. — Mohammad Agha
– Mohammad Agha, Commented Oct 6, 2020 at 20:34
Err my javascript is filled with interactions with server data so that gets a little complicated. I'm just checking to see if there's a javascript method that exists already that can handle this like tag.style.color. — Yun Jae Jung
– Yun Jae Jung, Commented Oct 6, 2020 at 20:45
Try document.getElementById("myDIV").classList.add("mystyle"); w3schools.com/jsref/prop_element_classlist.asp or toggle instead of add — Ricardo Sanchez
– Ricardo Sanchez, Commented Oct 6, 2020 at 20:50
It seemed promising, but this would only work after the button is clicked and I only want the color to be changed while it's active. Before it's fully clicked. — Yun Jae Jung
– Yun Jae Jung, Commented Oct 6, 2020 at 21:02

Allan J. · Accepted Answer · 2020-10-06 21:21:25Z

2

You can set an ID on the link and target that with the css

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

answered Oct 6, 2020 at 21:21

Allan J.

5401 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Tate · Accepted Answer · 2020-10-07 15:07:50Z

2

Seems like there's no programmatic way to target the CSS :active state in JavaScript. One approach would be to listen for mouseup and mousedown events on the links in question and set their color via style.

  // 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';
  });

edited Oct 7, 2020 at 15:07

Daniel Tate

2,1634 gold badges26 silver badges53 bronze badges

answered Oct 6, 2020 at 21:07

sprite421

214 bronze badges

Collectives™ on Stack Overflow

How to change active color of hyperlink with javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related