Javascript - 获取悬停元素的背景颜色 [英] Javascript - getting the background color of the hovered element

问题描述

我目前正在制作google chrome扩展程序，并且正在使用此javascript来动态更改悬停元素的背景颜色：

 <$ c $如果元素
中存在addEventListener函数if（elem.addEventListener）{
 elem.addEventListener（evt，cb）{
 //查看元素
是否存在addEventListener函数if（elem.addEventListener）{
 elem.addEventListener（evt， CB，假）; 
 //如果addEventListener不存在，看看它是否是IE浏览器
}否则if（elem.attachEvent）{
 //用on
前缀事件类型elem.attachEvent（'on'+ evt，function（）{
 / *使用调用来模拟addEventListener 
 *这将确保回调获得this
 *的元素，并且将确保函数的第一个参数是事件对象
 * / 
 cb.call（event.srcElement，event）; 
}）; 
} 
}; 
 
 
 bindEvent（document，'mouseover'，function（event）
 {var target = event.target || event.srcElement; 
 / *获取目标。 style.background并将其反转* / 
}）; 
 
 bindEvent（document，'mouseout'，function（event）
 {var target = event.target || event.srcElement; 
 / * getting target.style.background and反转它* / 
}）; 
  

当与静态值一起使用时，如 target.style.background =＃ FFFFFF; 当光标悬停一个元素时，当光标离开该元素时，它会完美地工作，并且 target.style.background =＃00000; 。但是，当我尝试获取 target.style.background 或甚至 target.style.backgroundColor 的值时，I总是得到 rgb（255,255,255），无论元素的背景颜色是什么。

我知道如何将rgb转换为hexa以及如何反转它，但是如果我无法获得背景的初始值，那就没用了。

所以，我的问题是：为什么 var foo = target.style.backgroundColor; 总是返回 rgb （255,255,255）以及如何获得正确的值？

其他注意事项：稍后将扩展移植到其他浏览器，所以如果可能的话，跨浏览器的解决方案会很好。

解决方案

以我的经验， target.style 仅填充内联样式。要获得包括css定义在内的样式，只需使用 getComputedStyle 方法。例如

  //而不是这个
 target.style.backgroundColor 
 
 //试试这个
 getComputedStyle（target）.backgroundColor 
  

*请注意，使用 getComputedStyle 方法返回一个只读对象，并且 target.style 仍然应该用于设置背景颜色。

I'm currently making a google chrome extension and am using this javascript to change dynamically the background color of the hovered element:

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 */
});

and when used with static values, like target.style.background = #FFFFFF; when the cursor hover an element and target.style.background = #00000; when the cursor leave the element, it works perfectly. However, when I try to get the value of target.style.background or even target.style.backgroundColor, I always get rgb(255,255,255), no matter what the background color of the element is.

I know how to convert rgb to hexa and how to inverse it, but if I can't get the initial value of the background, it's useless.

So, my question is: why do var foo = target.style.backgroundColor; always return rgb(255, 255, 255) and how do I get the correct value?

Additional notes: the extension will be ported to other browsers later, so a cross-browser solution would be nice if it is possible.

解决方案

In my experience, target.style is only populated with inline styling. To get style including css definitions just use the getComputedStyle method. For example

//instead of this
target.style.backgroundColor

//try this
getComputedStyle(target).backgroundColor

*Note that using the getComputedStyle method returns a read-only object, and target.style should still be used to set the background color.

这篇关于Javascript - 获取悬停元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！