IE новый элемент со стилем?

Question

У меня есть эта таблица стилей:

.pixel{
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #ffcc00;
    font-size: 0px;
}

А это javascript:

function drawpixel(x,y){
    el = document.createElement('div');
    el.setAttribute('class','pixel');
    el.style.left = x;
    el.style.top = y;
    /*  IE needs this for some reason?
    el.style.position = "absolute";
    el.style.backgroundColor = "#FFCC00";
    el.style.width = "2px";
    el.style.height = "2px";
    */
    el.style.fontSize = "0px";
    el.style.lineHeight = "0px";
    document.body.appendChild(el);
}

function mover(event){
    element = document.getElementById("coords");
    element.innerHTML = event.clientX + " " + event.clientY;
    drawpixel(event.clientX, event.clientY);
} 

Что позволяет мне "рисовать" с помощью div. Но IE требует этих 4 закомментированных строк - по какой-то причине он не будет читать информацию о классе?

Есть ли более простой способ "исправить" это для IE, или мне просто нужно иметь эти 4 строки?

спасибо

Answer 1

Просто используйте el.className = "pixel";

Просто кое-что еще я заметил. Я знаю, что вопрос гласит, что это для IE, но похоже, что вы используете mover(event) в обработчике событий. Если вы используете Firefox и другие браузеры, вы можете подумать о кодировании функции перемещения следующим образом:

function mover(evt){  
    evt = evt || event;                                                           
    element = document.getElementById("coords");                                 
    element.innerHTML = evt .clientX + " " + evt .clientY;                     
    drawpixel(evt.clientX, evt.clientY);                                     
} 

Answer 2

В IE ( из-за этой ошибки ) вам нужно изменить это:

el.setAttribute('class','pixel');  

до

el.setAttribute('className','pixel');  

Реализация IE setAttribute() является печально сломанной перед IE8 (работает в режиме Стандарт IE8 )