JavaScript - 获取鼠标悬停元素的背景颜色

Question

我正在制作一个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甚至target.style.backgroundColor的值时，无论元素的背景颜色是什么，我总是得到rgb(255,255,255)。

我知道如何将RGB转换为16进制并进行反转，但如果我无法获取背景的初始值，那就没用了。

因此，我的问题是：为什么var foo = target.style.backgroundColor;总是返回rgb(255, 255, 255)，我该如何获取正确的值？

附加说明：该扩展程序稍后将被移植到其他浏览器中，因此最好提供跨浏览器的解决方案（如果可能的话）。

- Caramel Truffle

Answer 1

根据我的经验，target.style 只包含内联样式。要获取包括 CSS 定义的样式，请使用 getComputedStyle 方法。例如：

//instead of this
target.style.backgroundColor

//try this
getComputedStyle(target).backgroundColor

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

- BeardFist

---

请注意，getComputedStyle在至少IE6/7中不受支持，并会引发错误，因此您应该改用“currentStyle”方法。 另外，这如何帮助他获得悬停颜色？ - marksyzm

当我尝试获取颜色时，我用getComputedStyle(target).backgroundColor替换了target.style.backgroundColor，现在根据悬停的背景颜色，我得到了不同的结果！谢谢。 @marksyzm：我会记住这个方法，在做IE扩展时使用。 - Caramel Truffle

@marksyzm 不过，它在IE9+中得到支持。我认为现在很少有人开发针对IE6的项目了。此外，他想要获取元素悬停时的颜色，而不是元素悬停后的颜色。 - BeardFist

好的，BeardFist...哦，我不小心点了“踩”这条评论，而且无法撤销，真是太糟糕了——对此感到抱歉。 - marksyzm

Answer 2

您不能使用.style获取未使用.style或style = ""定义的设置。大多数浏览器实现了其他方法来获取当前样式计算，但这些方法是一片奇怪的领域。

Internet Explorer具有.currentStyle，而其余浏览器则倾向于实现.getComputedStyle。阅读这两个主题可能是一个好主意-然而，正如我所说，检索样式设置比它看起来更加复杂。

即使是jQuery的css方法也仅返回在该元素上明确定义的设置，即没有继承。

然而，以下内容可能会有用：

http://upshots.org/javascript/jquery-get-currentstylecomputedstyle

- Pebbl

---

当进行IE扩展时，我不会忘记将.getComputedStyle替换为.currentStyle。 - Caramel Truffle

@CaramelTruffle 很好很好 :) 只是提醒一下，这不是一个直接的替换，你很可能可以从BeardFirst的回答中看出来。 - Pebbl

Answer 3

我所知道的唯一可靠的方法是将CSS类或ID与颜色关联起来，然后从隐藏元素中的锚点或仅应用了该类的空锚标签中提取它。否则，就是要知道那个颜色是什么，并且已经将其作为值存储在某个地方。对于这种解决方案，我的HTML将如下所示：

<style>
a:hover,
a#yourChosenIdName {
background-color:#00FF00;
}
</style>

<a href="#" id="yourChosenIdName"><!-- --></a>

<script>
var el = document.getElementById('yourChosenIdName'),
    getStyle = el.currentStyle ? el.currentStyle : getComputedStyle(el),
    hoverBackgroundColor = getStyle.backgroundColor;
//do something with background-color
</script>

- marksyzm

---

你的代码中有一个轻微的逻辑错误。getComputedStyle 不能和 currentStyle 互换使用，前者是一个方法，而后者是一个对象。 - Pebbl