Как получить цвет фона элемента с помощью javascript?

Как я могу получить цвет фона любого элемента, скажем, Div, используя javascript. Я пробовал: -

<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>

Ответы

Ответ 1

Как и все свойства css, содержащие дефисы, их соответствующие имена в JS - это удаление дефиса и создание следующего капитала письма: backgroundColor

alert(myDiv.style.backgroundColor);

Ответ 2

Получить номер:

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

Пример:

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

Ответ 3

С jQuery:

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

С прототипом:

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

С чистым JS:

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

Ответ 4

Это зависит от того, какой стиль от div вам нужен. Это стиль фона, который был определен в CSS, или стиль фона, который был добавлен через javascript(inline) к текущему узлу?

В случае стиля CSS вы должны использовать компьютерный стиль. Как и в getStyle().

Со встроенным стилем вы должны использовать ссылку node.style: x.style.backgroundColor;

Также обратите внимание, что вы выбираете стиль с помощью ссылки camelCase/без дефиса, поэтому не background-color, а backgroundColor;

Ответ 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");

Ответ 6

Использование JQuery:

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