Проблема установки стиля для элемента, созданного с использованием DOM

Question

Я столкнулся с проблемой установки стиля для элемента 'tr', созданного с использованием DOM внутри javascript. код похож на

var tr = document.createElement("tr");
tr.onmouseover=function(){this.style.backgroundColor='#fbf9e0';};
                     or
tr.attachEvent('onmouseover',this.style.backgroundColor='#fbf9e0';);

я запускаю этот код в IE-7. Любой другой подход?

Answer 1

Является ли JQuery вариант?Если это так, это становится довольно простым:

$('tr').live('mouseover', function() {
   $(this).css('background-color', '#fbf9e0');
});

Это прикрепит обработчик события mouseover к каждому TR, независимо от того, присутствует он в DOM сейчас или будет в будущем.

Answer 2

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

tr:hover {
  background-color: #fbf9e0;
}

/* or */
tr.someClass:hover {
  background-color: #fbf9e0;
}

Если вы идете по этому маршруту класса, обязательно добавьте его к объекту:

<script>
  tr.className = 'someClass';
</script>

Answer 3

Использование attachEvent позволяет прикрепить более одного события к объекту.

Использование onmouseover при его установке может быть отменено