IE New item with style?

Question

I have this stylesheet:

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

And this 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);
} 

This allows me to draw using a div. But IE requires these 4 commented lines - for some reason it will not read class information?

Is there an easier way to “fix” it for IE, or do I pretty much just need to have these 4 lines?

thank

Answer 1

Just use 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)