2

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

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

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

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

4

3 回答 3

4

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

//instead of this
target.style.backgroundColor

//try this
getComputedStyle(target).backgroundColor

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

于 2013-06-03T09:00:29.780 回答
1

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

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

甚至 jQuery 的css方法也只返回特定于该元素的设置,即没有继承。

但是,以下可能有用:

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

于 2013-06-03T09:00:44.050 回答
0

我所知道的唯一可靠的方法是将 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>
于 2013-06-03T08:51:48.720 回答