Използвайки javascript, как да получа цвета на фона на клетка от таблица, когато щракна върху нея?

Искам да има изскачащ сигнал, който да ми показва фона на клетка от таблица, когато щракна върху нея. Просто не мога да намеря или разбера как да хвана цвета на фона.

Моята клетка от таблицата изглежда така:

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

Моята функция selectCell изглежда така:

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

Моят CSS изглежда така:

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

Всяка помощ ще бъде високо оценена!!


javascript html background-color
person Mr Shantastic    schedule 14.06.2013    source източник

Отговори (2)


arrow_upward
5
arrow_downward

Стиловете на възел са в свойството styles, например:

e.target.style.backgroundColor;

Това обаче работи само за онези стилове, декларирани с вградения атрибут style. Ако CSS е зададен (както трябва да бъде) с помощта на таблица със стилове, ще трябва да използвате:

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

Internet Explorer, за съжаление, не прилага опцията getComputedStyle(), вместо това предлага currentStyle (имайте предвид, че те също не поддържат e.target, мисля, поне във версии преди 8?). Нямам Internet Explorer, с който да тествам, но документите предполагат, че трябва да се използва:

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

Препратки:

person David says reinstate Monica    schedule 14.06.2013
comment
вторият ти е страхотен - person bugwheels94; 15.06.2013

arrow_upward
-1
arrow_downward

Можете да го направите лесно чрез функцията Jquery css().

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

За повече подробности вижте този пример

person Abhijeet kumar sharma    schedule 14.06.2013