Javascript DOM style.backgroundColor nie działa prawidłowo

Question

mój problem jest taki, jak następuje:

Mam kawałek kodu, który generuje javascript „nowy” dokument, korzystając document.write i na początku piszę cały nagłówek strony internetowej . W głowie mam trochę kodu CSS, który wygląda tak:

<style type='text/css'> 
.black {background-color: black;} 
.white {background-color: #ffffff;} 
td {width:50px; height:50px;} 
</style> 

i JavaScript rysuje tabelę w części ciała. Pisanie kodu to w zasadzie dwie pętle for, które rysują szachownicę. Ale to nawet nie ma znaczenia. Każdy element td otrzymuje klasę black lub white, dzięki czemu jest odpowiednio barwiony. I każdy atrybut td otrzymuje atrybut onclick='changeBg(this)'.

Oto, gdzie pojawia się problem. Nie mogę uzyskać dostępu do koloru tła elementu, który zostanie kliknięty. Funkcja wygląda następująco:

function changeBg(element) 
{ 
    alert(element.style.backgroundColor); 
    element.style.backgroundColor = "red"; 
} 

Najpierw ostrzegam o kolorze bieżącego elementu. Zawsze ostrzega o pustym powiadomieniu. Po zmianie koloru na czerwony i ponownym kliknięciu elementu pojawia się ostrzeżenie red. td są kolorowe w przeglądarce i jeśli sprawdzę je za pomocą firebug, mają one background-color: black | white;

Czego mi brakuje i jak to naprawić? Zdałem sobie sprawę, że jeśli ustawię kolor td podczas tworzenia ich przy użyciu style="color: black | white"; działa, ale nie wiem do jakiej klasy należą.

Answer 1

można uzyskać obecnie zastosowany styl korzystając window.getComputedStyle - Docs

function changeBg(element) { 
    alert(window.getComputedStyle(element).backgroundColor); 
    element.style.backgroundColor = "red"; 
}