2013-06-14 4 views
5

Ich möchte eine Warnmeldung erhalten, die den Hintergrund einer Tabellenzelle anzeigt, wenn ich darauf klicke. Ich kann einfach nicht finden, oder herausfinden, wie man die Hintergrundfarbe ergreift.Wie bekomme ich mit Javascript die Hintergrundfarbe einer Tabellenzelle, wenn ich darauf klicke?

Meine Tabellenzelle sieht wie folgt aus:

<td id="s0" onclick="selectCell(event)">0</td> 

Meine Select Funktion wie folgt aussieht:

function selectCell(e){ 
    alert(e.target.backgroundColor); //this gives me 'undefined' 
    alert(e.target.bgcolor);   //this gives me 'undefined' 
    alert(e.target.bgColor);   //nothing shows up. i don't believe this is a valid property 
    //once i know i am properly grabbing the color i will do stuff with it here. 
} 

Meine CSS sieht wie folgt aus:

#s0 { 
    border: 1px solid; 
    background-color: yellow; 
} 

Jede Hilfe wäre sehr geschätzt !!

Antwort

4

Die Stile eines Knotens sind in der Eigenschaft Arten, zum Beispiel:

e.target.style.backgroundColor; 

Dies funktioniert jedoch nur für jene Stile mit dem in-line style Attribute deklarieren. Wenn CSS zugewiesen wird ein Stylesheet (wie es sein sollte) verwenden, müssen Sie verwenden müssen:

window.getComputedStyle(e.target, null).backgroundColor; 

Internet Explorer leider nicht implementiert die getComputedStyle() Option, stattdessen bietet currentStyle (Geist, sie don‘ t support e.target entweder, denke ich, zumindest in Versionen vor 8?). Ich habe nicht den Internet Explorer, mit dem testen, aber die docs vorschlagen, dass es verwendet werden soll:

var e = window.event ? window.event : e, 
    elementNode = e.target !== null ? e.target : e.srcElement; 
elementNode.currentStyle.backgroundColor; 

Referenzen:

+1

es ist Stil nicht Stile – bugwheels94

+0

@Ankit: Dank ... dammit , erregbares Tippen ... X ( –

+0

Ihr zweiter ist genial – bugwheels94

-1

Sie es von JQuery CSS leicht tun können() Funktion

jQuery(document).ready(function(){ 
    $(this).click(function() { 
      var color = $(this).css("background-color"); 
      alert(color); 
    }); 
}); 

Für weitere Details haben einen Blick auf this Beispiel

Verwandte Themen