如何使用javascript获取元素的背景颜色？

How can i get the background color of any element, say Div, using javascript. I tried:-

我如何使用javascript获取任何元素的背景颜色，比如Div。我试过了：-

<html>
    <body>
        <div id="myDivID" style="background-color: red">shit happens</div>
        <input type="button" value="click me" onclick="getColor();">
    </body>

    <script type="text/javascript">
        function getColor(){
            myDivObj = document.getElementById("myDivID")
            if ( myDivObj ){
                alert ( 'myDivObj.bgColor: ' + myDivObj.bgColor ); // shows: undefined
                alert ( 'myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor ); // shows: undefined
                //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :)
                alert ( 'style:bgColor: ' + getStyle ( myDivObj, 'bgColor' ) ); //shows: undefined
                alert ( 'style:backgroundcolor: ' +  getStyle ( myDivObj, 'backgroundcolor' ) ); // shows:undefined:
                alert ( 'style:background-color: ' +  getStyle ( myDivObj, 'background-color' ) );  // shows: undefined
            }else{
                alert ( 'damn' );
            }
        }
        /* copied from `QuirksMode`  - http://www.quirksmode.org/dom/getstyles.html - */
        function getStyle(x,styleProp)
        {
            if (x.currentStyle)
                var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle)
                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
            return y;
        }
    </script>
</html>

7 个解决方案

#1

As with all css properties that contain hyphens, their corresponding names in JS is to remove the hyphen and make the following letter capital: backgroundColor

与包含连字符的所有css属性一样，JS中的相应名称是删除连字符并使后面的字母为大写：backgroundColor

alert(myDiv.style.backgroundColor);

#2

Get at number:

获取号码：

window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* );

Example:

例：

window.getComputedStyle( document.body ,null).getPropertyValue('background-color');  
window.getComputedStyle( document.body ,null).getPropertyValue('width');  
~ document.body.clientWidth

#3

With jQuery:

使用jQuery：

jQuery('#myDivID').css("background-color");

With prototype:

原型：

$('myDivID').getStyle('backgroundColor');

With pure JS:

使用纯JS：

document.getElementById("myDivID").style.backgroundColor

#4

It depends which style from the div you need. Is this a background style which was defined in CSS or background style which was added through javascript(inline) to the current node?

这取决于你需要哪种风格。这是一种在CSS或背景样式中定义的背景样式，它是通过javascript（内联）添加到当前节点的吗？

In Case of CSS style, you should use computed style. Like you do in getStyle.

在CSS样式的情况下，您应该使用计算样式。就像你在getStyle中一样。

With inline style you should use node.style reference: x.style.backgroundColor;

使用内联样式，您应该使用node.style引用：x.style.backgroundColor;

Also notice, that you pick the style by using CamelCase/non hyphen reference, so not background-color, but backgroundColor;

另请注意，您使用CamelCase /非连字符引用选择样式，因此不是background-color，而是backgroundColor;

#5

Using JQuery:

使用JQuery：

var color = $('#myDivID').css("background-color");

#6

This worked for me:

这对我有用：

var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor;

And, even better:

甚至更好：

var getStyle = function(element, property) {
    return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
};
var backgroundColor = getStyle(myDiv, "background-color");

#7

btw, checkout the following getelementsbyclassname function implementation usage comparisons: http://ejohn.org/blog/getelementsbyclassname-in-firefox-3/

顺便说一下，签出以下getelementsbyclassname函数实现用法比较：http：//ejohn.org/blog/getelementsbyclassname-in-firefox-3/

#1