css JavaScript查找链接的颜色

zzzyeukh  于 11个月前  发布在  Java
关注(0)|答案(6)|浏览(101)

因此,我的问题基本上是下来,我有一个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 />

字符串
其中一些我已经访问过,另一些我还没有访问过,所以我有CSS样式来帮助识别访问过的和未访问过的(如下所示)。

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

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


在视觉上,我可以看到哪些网站已经和还没有被访问过,但当我运行一个基本的JavaScript行,它不能拿起文本的颜色或背景颜色(代码如下),它只是提供空白输出。

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


有人知道为什么它不能根据之前的CSS设置来选择文本的颜色吗?有解决方案吗?
我使用Firefox 27.0.1运行这些测试,但也尝试过其他浏览器,但收到同样的问题。

yruzcnhs

yruzcnhs1#

对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

f45qwnt8

f45qwnt82#

作为一项隐私措施,已禁用对已访问链接的检测。谢谢。
参考privacy-related changes coming to CSS :visited
简而言之,这是不可能做到的。也就是说,可能会有黑客,但这些很可能很快就被修补,结果是不可靠的。
从我所读到的来看,这在大多数浏览器中都是实现的。
一个可以破解历史的例子是使用定时攻击。简而言之:
1.您想知道用户是否访问过aleister_crowley.com
1.您找到了一个所有用户都会缓存的项目,比如说aleister_crowley.com/profile.jpg
1.您可以添加一个脚本来将此图片加载到您的站点中,并计算所需的时间。
如果用户访问过该页,由于缓存在用户浏览器中,图像将快速加载。因此,您可以估计用户实际上访问过该页。
More in this paper的一个。
当然,这将是一个案例,你的网站已经翻转到黑暗的一面。

u91tlkcl

u91tlkcl3#

在这里,

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

字符串

DEMO

lvmkulzt

lvmkulzt4#

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

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

jhdbpxl9

jhdbpxl95#

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

3zwjbxry

3zwjbxry6#

首先,你似乎必须在CSS a样式后使用“#”。删除它们。其次,我不确定常规js有什么问题。适用于jQuery。
JSFiddle

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

字符串

相关问题