Question

如何使用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>

Answer 1

获取电话号码：

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

示例：

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

Answer 2

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

alert(myDiv.style.backgroundColor);

Answer 3

使用jQuery：

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

使用原型：

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

使用纯JS：

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

Answer 4

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

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

使用内联样式时，您应使用node.style参考：x.style.backgroundColor;

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

Answer 5

这对我有用：

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

而且，更好的是：

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");

Answer 6

使用JQuery：

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

Answer 7

简单的解决方案

myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;

现在背景色存储在新变量中。

https://jsfiddle.net/7q1dpeo9/1/

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

7 个答案: