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

Which allows me to “draw” with divs. But IE requires those 4 commented lines – it won’t read the class information for some reason?

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

thanks

Answer 1

Just use el.className = "pixel";

Just something else I noticed. I know the question states that this is for IE but it looks like you are using your mover(event) in an event handler. If you are using Firefox and other browsers you may want to consider coding the mover function like this:

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