Change Active Link Color

[danugi.4u]

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>
<script>
function myFunction() {
document.body.style.backgroundColor = “blue”;
}
</script>

<script>
function myFunction() {if (document.body.style.backgroundColor = “red”;)
{document.getElementById(“a”).style.color = “green”;}
}
</script>

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

[Senff]

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).

[danugi.4u]

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?

[Mottie]

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 + "}";
document.querySelector("head").appendChild(styleElm);

[Author]

Posts