如何将CSS应用于IE中使用javascript创建的元素？

Question

我一直试图为文本框创建一个自动完成功能，用户输入前几个字符，系统向他们显示一个以用户给定输入开始的条目列表。这些条目从数据库中获取，并通过javascript显示在UI中。除了在优秀的ol‘Internet中，样式表属性在javascript创建的p元素上不起作用外，所有这些都工作得很完美。有人能告诉我我在这里做错了什么吗？这是我正在使用的代码

HTML/JSP

<table>
<tr>
<td nowrap>WO Number</td>

<td style="text-align:left;">
  <html:text property="won" styleClass="epntextBox"  onkeyup="autokom();" styleId="won"/>
  <div id="wondiv"></div>
</td>
</tr>
</table>

Javascript (这是一些很长的代码。虽然很好.)

function autokom(){
var number = document.getElementById("won").value;
var url = "Fetch_Won?wonnum="+number;
while(document.getElementById("wondiv").hasChildNodes()){
    document.getElementById("wondiv").removeChild(document.getElementById("wondiv").childNodes[0]);
}
if(number=="" || number==null){
    return false;
}
    if(window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();

        try
        {
            req.open("GET",url,true);
        }
        catch(e)
        {
            alert(e);
        }
        req.onreadystatechange = processfetchWON;           
        req.send(null);
    }
    else if(window.ActiveXObject)
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
        {

            req.open("GET", url, true);
            req.onreadystatechange = processfetchWON;               
            req.send(null);
        }
    }
}
function processfetchWON(){
if (req.readyState == 4)
{   
    if (req.status == 200)
    {
        try{   
            var responseXML = req.responseXML;
            var parents = responseXML.getElementsByTagName("won");
            var won;
var wondiv = document.getElementById("wondiv");
var num = 0;

if(parents.length>=15){
num = 15;
}else {num = parents.length;}
            for (var loop = 0; loop < num; loop++)
            {
                won = parents[loop].childNodes[0].nodeValue;
                var p = document.createElement("p");
                p.setAttribute("class", "wonp");
                p.setAttribute("id", won);
                p.onclick = function() { setwon(this.id); };
                p.innerHTML = won;
                wondiv.appendChild(p);
            }

        }catch(e){
            alert("Exception in fetching WON/ SWON numbers");
        }
    }
}
}
function setwon(swon){
document.getElementById("won").value=swon;
while(document.getElementById("wondiv").hasChildNodes()){
    document.getElementById("wondiv").removeChild(document.getElementById("wondiv").childNodes[0]);
}

}

CSS

#wondiv{    /*This part works just fine*/
position: absolute;z-index:2;
}
.wonp{    /*But the following doesn't*/
display:block;
margin:0px;
padding:4px;
border:1px inset #000000;
cursor: pointer;
background: white;
width:123px;
}
.wonp:hover{
background: #cbcbcb;
}

我在javascript代码上没有任何问题，但是没有被IE(8-11)应用到下拉列表的样式表让我发疯了！谁来帮帮忙。我在这里已经筋疲力尽了。(对于还没有创建js的元素，同样的css工作得很好)

Answer 1

变化

p.setAttribute("class", "wonp");

至

p.className = "wonp";

有些版本的IE有一个错误，它们期望您在setAttribute中使用setAttribute，即使属性的名称是class，而不是className。但是所有版本的IE和其他浏览器都使用className作为反射属性名，所以上面的更改将解决这个问题。

实际需要使用setAttribute是很少见的。实际上，您可能设置的所有属性( data-*属性的明显例外)都反映了元素实例上更有用的属性。class和for (如label元素中的名称)有一些奇怪的名称(className和htmlFor)，因为class和for是JavaScript中的保留词，在定义时，JavaScript不允许您使用保留词作为属性名文本(现在是这样)，但大多数其他反射属性的名称与它们所反映的属性具有相同的名称：

• element.setAttribute("class", x) => element.className = x
• labelElement.setAttribute("for", x) => labelElement.htmlFor = x
• element.setAttribute("id", x) => element.id = x
• formElement.setAttribute("target", x) => formElement.target = x
• linkElement.setAttribute("rel", x) => linkElement.rel = x
• element.setAttribute("src", x) => element.src = x (script，img，.)

有时会有细微的差别。例如，element.getAttribute("href")将为您提供href属性的实际文本，但element.href将给您解析版本(例如，扩展到完整路径的相对路径)。类似地，输入元素的value属性仅从"value"属性初始化，在此之后，它开始了自己的生命(通常，但并不总是反映为defaultValue)。