我目前正在制作一个 google chrome 扩展程序,并且正在使用这个 javascript 来动态更改悬停元素的背景颜色:
var bindEvent = function(elem ,evt,cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
/* use call to simulate addEventListener
* This will make sure the callback gets the element for "this"
* and will ensure the function's first argument is the event object
*/
cb.call(event.srcElement,event);
});
}
};
bindEvent(document,'mouseover', function(event)
{ var target = event.target || event.srcElement;
/* getting target.style.background and inversing it */
});
bindEvent(document,'mouseout', function(event)
{ var target = event.target || event.srcElement;
/* getting target.style.background and inversing it */
});
当与静态值一起使用时,例如target.style.background = #FFFFFF;
当光标悬停在元素target.style.background = #00000;
上以及光标离开元素时,它可以完美地工作。但是,当我尝试获取target.style.background
or的值时target.style.backgroundColor
,我总是得到rgb(255,255,255)
,无论元素的背景颜色是什么。
我知道如何将rgb转换为hexa以及如何反转它,但是如果我无法获得背景的初始值,那就没用了。
所以,我的问题是:为什么var foo = target.style.backgroundColor;
总是返回rgb(255, 255, 255)
以及如何获得正确的值?
附加说明:该扩展稍后将移植到其他浏览器,因此如果可能的话,跨浏览器解决方案会很好。