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（due to this bug）中，您需要更改此内容：

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

到

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

在IE8（在 IE8标准模式下运行）之前，IE的setAttribute()实现严重破坏

IE新元素与风格？

2 个答案: