The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Change Active Link Color

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #241257

    I am looking to change the active link color in JavaScript.

    What I have is an option to have the visitor change the page color. The issue is when they choose blue as the color, the link is not visible.

    I have looked for hours for certain code and came up empty.

    I am using this code only as a test page, once I figure this out, I can implement it into my own code.
    <button type=”button” onclick=”myFunction()”>Set background color</button>
    function myFunction() { = “blue”;

    function myFunction() {if ( = “red”;)
    {document.getElementById(“a”).style.color = “green”;}

    I have not found anything exact, but have come close in; but it does not relate to my conundrum.


    Instead of giving the background (and links) a color through JavaScript, I would suggest to give the page body a CSS classname. Then with CSS, you can control pretty much everything on the page by using that classname, something like this:

    body.redBackground { background: #ff0000; }
    body.redBackground a { color: #ff0000; }
    body.blueBackground { background: #0000ff; }
    body.blueBackground a { color: #00ff00; }

    Naming just for clarity purposes (I’m not a fan of giving classnames with colors).


    So, what you are essentially stating is to add styling to my style sheet already attached with the specific color then. That would work, but I still would like to know how to perform this JS.

    W3 had created id’s to the H1, p, and, other tags, then used the code I showed to change the color.

    I’m new to JS; the first time I used it was 4 years ago. I used Dreamweaver and we had to create 2 different colors in Photoshop to get the hover effects (which required about 40 lines of JavaScript to become effective).

    What is the issue with assigning classes to colors? I had to do this to style my buttons. Many do not like it, but sometimes it is necessary, under the right circumstances, right?


    I can think of two different ways to accomplish this:

    • If the user can back the background color, allow them to choose the link colors as well: link, hover, active and visited.
    • If you don’t want to do that, then maybe use javascript to find the complimentary colors

    Then add the :active color inside a style. Something like this:

    var activeLink = "#d00",
      styleElm = document.createElement("style");
    styleElm.textContent = "a:active { color: " + activeLink + "}";
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.