Javascript Find The Colour Of Link

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

Solution 1:

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

Solution 2:

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.

Solution 3:

Here it is,

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

DEMO

Solution 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

Solution 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