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

Question

Мне нужно было получить цвет фона элемента, который ранее был определен таблицей стилей, чтобы определить стиль для нового элемента, который будет динамически создаваться с помощью javascript.

Я пробовал использовать свойство backgroundColor, но возвращаемое значение было пустым. Значение сначала нужно задать с помощью js, тогда его можно получить с помощью свойства (не в шестнадцатеричном). Есть ли другая альтернатива этому без изменения элемента? Как использовать offsetWidth?

CSS:

#mybox { 
    width: 100px; 
    height: 100px; 
    margin: auto; 
    background-color: #eb5; 
} 
#buttons { 
    text-align: center; 
} 

HTML:

<div id="mybox"></div> <div id="buttons"> 
    <input type="button" value="set" onclick="setColor('#ddd')" /> 
    &nbsp; 
    <input type="button" value="get" onclick="getColor()" /> 
</div> 

JS:

function getColor(color){ 
    var box = document.getElementById("mybox"); 
    alert(box.style.backgroundColor); 
} 
function setColor(color){ 
    var box = document.getElementById("mybox"); 
    box.style.backgroundColor = color; 
} 

JSFiddle: http://jsfiddle.net/mevmike/FjkYA/

Answer 1

Попробуйте это:

function getStyle(element, property) { 
    if (element.currentStyle) 
     return this.currentStyle[property]; 
    else if (getComputedStyle) 
     return getComputedStyle(element, null)[property]; 
    else 
     return element.style[property]; 
} 

Поместите этот код в начало файла сценария, и доступ к нему таким образом

function getColor(color){ 
    var box = document.getElementById("mybox"); 
    alert(getStyle(box, 'backgroundColor')); 
} 

EDIT: «сжатая» версия

function getStyle(element, property) { 
    return getComputedStyle ? getComputedStyle(element, null)[property] : 
    element.currentStyle ? element.currentStyle[property] : element.style[property]; 
}