So the issue I'm having basically es down, I have a list of external websites in HTML (as seen below).

<a id="listitem0" href="/">/</a><br />
<a id="listitem1" href="/">/</a><br />
<a id="listitem2" href="/">/</a><br />
<a id="listitem3" href="/">/</a><br />

And some of them I have visited & others I haven't, so I have CSS styling to help identify the visited vs not visited (as seen below).

<style type="text/css">
    a {
    color:#999999;
    background-color:#000;
}

a:visited {
    color:#00FF00;
    background-color:#30F;
}
</style>

Visually I can see which websites have & haven't been visited, but when I run a basic javascript line it can't pick up the colour of the text or the background colour (code below), it just provides blank output.

<script type="application/javascript">
alert(document.getElementById("listitem0").style.backgroundColor);
alert(document.getElementById("listitem0").style.color);
</script>

Does anyone know why it can't pick up the colour of the text based on the CSS set earlier? And is there solution to get this?

I'm using Firefox 27.0.1 to run these tests, but have tried other browsers as well, but receive the same issue.

So the issue I'm having basically es down, I have a list of external websites in HTML (as seen below).

<a id="listitem0" href="http://google..au/">http://google..au/</a><br />
<a id="listitem1" href="http://stackoverflow./">http://stackoverflow./</a><br />
<a id="listitem2" href="http://kbbdigital..au/">http://kbbdigital..au/</a><br />
<a id="listitem3" href="http://netreach..au/">http://netreach..au/</a><br />

And some of them I have visited & others I haven't, so I have CSS styling to help identify the visited vs not visited (as seen below).

<style type="text/css">
    a {
    color:#999999;
    background-color:#000;
}

a:visited {
    color:#00FF00;
    background-color:#30F;
}
</style>

Visually I can see which websites have & haven't been visited, but when I run a basic javascript line it can't pick up the colour of the text or the background colour (code below), it just provides blank output.

<script type="application/javascript">
alert(document.getElementById("listitem0").style.backgroundColor);
alert(document.getElementById("listitem0").style.color);
</script>

Does anyone know why it can't pick up the colour of the text based on the CSS set earlier? And is there solution to get this?

I'm using Firefox 27.0.1 to run these tests, but have tried other browsers as well, but receive the same issue.

• javascript
• html
• css
• hyperlink
• anchor

• you want to learn about getComputedStyle. getComputedStyle(element, null).getPropertyValue("color") -- developer.mozilla/en-US/docs/Web/API/… – Mike 'Pomax' Kamermans Commented Feb 19, 2014 at 5:07
• 2 what is a#? never did like this before in css.. :/ – Mr_Green Commented Feb 19, 2014 at 5:11
• element.style will only get inline styles. – adeneo Commented Feb 19, 2014 at 5:12
• sidenote: this should be a and a:visited (with no sharps) – Greg Commented Feb 19, 2014 at 5:18
• 1 @Mike'Pomax'Kamermans: Then this should also be of interest: privacy-related changes ing to CSS :visited. From 2010. – user13500 Commented Feb 19, 2014 at 5:49

6 Answers 6

Make following changes to CSS,

a {                        // element selector will select all `a` elements in document
    color:#999999;
    background-color:#000;
}
a:visited {
    color:#00FF00;
    background-color:#30F;
}

And do following,

var element = document.getElementById("listitem0");
    style = window.getComputedStyle(element), // will return you CSSStyleDeclaration { }. Style object
    color = style.getPropertyValue('color'), // return property value
    background = style.getPropertyValue('background-Color');

console.log(color, background);

DEMO

The detection of visited links is disabled as a privacy measure. And thanks for that.

Ref. privacy-related changes ing to CSS :visited

In short, it can't be done. That said, there might be hacks, but those would most likely quickly be patched and as a result being unreliable.

From what I read, this is implemented in most browsers.

As an example of how one could hack the history is using timing attacks. That is in short:

1. You want to know if user has visited aleister_crowley.
2. You find an item which all users would have cached, lets say aleister_crowley./profile.jpg
3. You add a script to load this picture in your site, and time how long it takes.

If user has visited the page the image would load quickly due to caching in the users browser. As such you can estimate the user has, in fact, visited that page.

More in this paper.

Then of course, this would be a case were your site has flipped to the dark side.

Here it is,

element = document.getElementById("listitem0");
alert(window.getComputedStyle(element,null).getPropertyValue("background-color")); 
alert(window.getComputedStyle(element,null).getPropertyValue("color"));

DEMO

Below code to find the color of link with cross browser solution.

var link = document.getElementById('listitem0');  // Find element

// Cross Browser Solution to get the color of link
var getStyle = function(el, cssProperty){
    if(typeof getComputedStyle !== 'undefined'){
        return window.getComputedStyle(el, null).getPropertyValue(cssProperty);
    } else {
        // This will work in legacy browsers(IE8 and below)
        return el.currentStyle[cssProperty];
    }
}

var colorName = getStyle(link, 'color');
alert(colorName)

Fiddle Demo

The style property gives you the value that is set inline, in the HTML tag element's style property. In your case you use CSS styling, so you need to use the getComputedStyle API: window.getComputedStyle(document.getElementById('listitem0')).color

First you seem to have to '#' after you CSS a styles. Remove those. Second, I'm not sure what the problem is with the regular js. Works with jQuery.

JSFiddle

alert($('#listitem0').css('background-color'));
alert($('#listitem0').css('color'));