Question

所以我遇到的问题基本上都没有了，我有一个HTML外部网站列表（如下所示）。

<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 />

其中一些我访问过＆amp;其他我没有，所以我有CSS样式来帮助识别被访问者与未被访问者（如下所示）。

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

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

从视觉上我可以看到哪些网站有＆amp;没有被访问过，但是当我运行一个基本的javascript行时，它无法获取文本颜色或背景颜色（下面的代码），它只是提供空白输出。

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

有谁知道为什么它不能根据之前设置的CSS来获取文本的颜色？是否有解决方案来获得这个？

我正在使用Firefox 27.0.1来运行这些测试，但也尝试过其他浏览器，但收到同样的问题。

Answer 1

对CSS进行以下更改

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

并遵循，

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 2

在这里，

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

<强> DEMO

Answer 3

禁用对访问链接的检测作为隐私措施。谢谢你。

参考。 privacy-related changes coming to CSS :visited

简而言之，它无法完成。也就是说，可能存在黑客攻击，但很可能会很快被修补，因此不可靠。

根据我的阅读，这在大多数浏览器中实现。

作为一个人如何破解历史的例子是使用定时攻击。简而言之：

您想知道用户是否访问了aleister_crowley.com
您找到了一个所有用户都会缓存的项目，比方说aleister_crowley.com/profile.jpg
您添加了一个脚本以在您的网站中加载此图片，并计算所需的时间。

如果用户访问了该页面，则由于用户浏览器中的缓存，图像会快速加载。因此，您可以估计用户实际上已访问过该页面。

More in this paper

当然，如果您的网站已经转向黑暗面，那将是一个案例。

Answer 4

下面的代码可以找到跨浏览器解决方案的链接颜色。

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

style属性为您提供在HTML标记元素的style属性中设置的内联值。在您的情况下，您使用CSS样式，因此您需要使用getComputedStyle API： window.getComputedStyle(document.getElementById('listitem0')).color

Answer 6

首先，在CSS样式之后你似乎需要'＃'。删除那些。其次，我不确定常规js的问题是什么。适用于jQuery。

JSFiddle

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

Javascript找到链接的颜色

6 个答案:

`DEMO`