Javascript Find The Colour Of Link

Question

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

<a id="listitem0" href="http://google.com.au/">http://google.com.au/</a><br />
<a id="listitem1" href="http://stackoverflow.com/">http://stackoverflow.com/</a><br />
<a id="listitem2" href="http://kbbdigital.com.au/">http://kbbdigital.com.au/</a><br />
<a id="listitem3" href="http://netreach.com.au/">http://netreach.com.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.

Answer 1

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

Ref. privacy-related changes coming 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.com
2. You find an item which all users would have cached, lets say aleister_crowley.com/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.

Answer 2

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

Answer 3

Here it is,

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

DEMO

Answer 4

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

Answer 5

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

Answer 6

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