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转换为hexa以及如何反转它，但如果我无法获得背景的初始值，那就没用了。

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

附加说明：扩展程序稍后会移植到其他浏览器，因此如果可能的话，跨浏览器解决方案会很好。

Answer 1

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

//instead of this
target.style.backgroundColor

//try this
getComputedStyle(target).backgroundColor

*请注意，使用getComputedStyle方法会返回read-only个对象，target.style仍应用于设置背景颜色。

Answer 2

您无法使用.style获取尚未使用.style或style=""定义的设置。大多数浏览器都采用其他方式来进行当前的样式计算，但这些都是一个奇怪的雷区。

Internet Explorer有.currentStyle，而其他人则倾向于实现.getComputedStyle。阅读这两个主题，看看它们的实现是一个好主意 - 但是，正如我所说的，检索样式设置是一个比它最初看起来要复杂得多的过程。

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

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

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

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>

Javascript - 获取悬停元素的背景颜色

3 个答案: