使用JS如何获取\修改CSS伪类的值

yjyly 2011-05-20 04:13:20

有以下HTML代码
<body>
<div id="div1">
<p>Hello world</p>
<a href="http://www.baidu.com" id="a_link">this is a link</a>
</div>
</body>
/-------------------------------------------------------
有以下CSS代码
<style type="text/css">
#div1{ background-color:#FFFF00;}
#div1 a:hover{ color:rgb(168,235,675); background-color:#FFF;}
#div1 a{ background-color:#00F; color:#000;}
</style>

问题：
如何获取css中a:hover的值？
下面是我写的方式：
var a_link = document.getElementById("a_link");
var value =document.defaultView.getComputedStyle(a_link , ":hover").color;
但是获取的值是#00F的值，根本不是rgb的值。如何才能获取a:hover的值呢？或则说大多数开发中根本不需要获取a：hover中的值嘛？求高手解惑！！
以下是关于getComputedStyle这个方法的说明：
http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/ViewCSS.html

...全文

720 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

iLugo 2011-08-01

打赏
举报

切换的效果，用JS把属性写到html中，比如第一个按钮的class=red,当点击第二个按钮的时候，第一个按钮的class=red就删掉，然后在第二个按钮中写上class=red。这要怎么实现？就是有个删除操作

yjyly 2011-05-20

打赏
举报

那如何设置各种各样CSS伪类的值呢?

yjyly 2011-05-20

打赏
举报

我测试也通过了。原因是没有使用onmouseover这样的方式来访问，直接是在window.onload中去访问，因此始终取得值是#div1 a{ background-color:#00F; color:#000;}中color的值。

孟子E章 2011-05-20

打赏
举报

我的也是ff4.0.1
弹出的是
rgb(168,235,255);

yjyly 2011-05-20

打赏
举报

请问楼上的，你是在FF那个版本测试的？我使用的版本是4.0.1的，但是获取的值是#div1 a{ background-color:#00F; color:#000;}中color的值，并不是a:hover中color的值!

孟子E章 2011-05-20

打赏
举报

ff测试是可以的
<body>
<style type="text/css">
#div1{ background-color:#FFFF00;}
#div1 a:hover{ color:rgb(168,235,675); background-color:#FFF;}
#div1 a{ background-color:#00F; color:#000;}
</style>
<div id="div1">
<p>Hello world</p>
<a href="http://www.baidu.com" id="a_link" onmouseover="a()">this is a link</a>
<script>
function a()
{
var a_link = document.getElementById("a_link");
var value =document.defaultView.getComputedStyle(a_link , ":hover").color;
alert(value)
}
</script>
</div>
</body>