View Full Version : Changing CSS Link Color Attribute

12-08-2010, 10:11 PM
I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.

My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to.

I've only ever done a small amount of JS coding but from the research I've done it should go something like this,

document.style.alinkColor = "COLOR"

I got to that via discovering that

document.style.backgroundColor = "COLOR"

will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case.

Anyone able to point me in the right direction?

Old Pedant
12-08-2010, 11:47 PM
No, link colors are almost surely set as attributes on the a tag:

<style type="text/css">
a {
color: pink;
a:visited {
color: red;
a:hover {
color: blue;

and so on.

It's not a single body CSS property.

12-09-2010, 01:56 AM
It appears the site in question is setting the a:link, a:visted and a:active color properties all to the same colour. So therefore the code on their CSS looks like this.

background: transparent;
color: #7595EE;
text-decoration: underline;

So from that, and your explanation Old Pedant, I figure my JS code should be something along the lines of this,

document.style.alinkColor = 'COLOR';
document.style.avistedColor = 'COLOR';
document.style.aactiveColor = 'COLOR';

I don't want to simply change all the A tags colours to the colour as I wanted to leave the A:hover attribute alone. However this code still does not seem to work. I've done some more research but everything seems to be about using it to change when MouseOver or such, which doesn't seem to be helping me.

I think my problem is either still in naming the attribute/tag or possibly in the calling of the style sheet to edit.

Old Pedant
12-09-2010, 08:29 AM
No, one more time: THERE IS NO SUCH THING as alinkColor, et al.

The only reason the document.body.backgroundColor works is because there *IS* a property of that name for the body element *AND* because there is indeed only one document.body for each page!

body { background-color: black; }

You can't just make up your own names and hope that they will work!