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

Question

我一直在尝试为文本框创建自动完成功能，用户在其中输入前几个字符，系统会向他们显示以用户给定输入开头的条目列表。这些条目从数据库中获取并显示在 UI 到 javascript 中。除了在优秀的 Internet Explorer 中，一切都完美无缺，其中样式 sheet 属性不适用于 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) 未将样式 sheet 应用于下拉菜单，这让我抓狂！有人请帮忙。我在这里无能为力。（同样的 css 对于没有被 js 创建的元素也能正常工作）

Answer 1

改变

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

到

p.className = "wonp";

某些版本的 IE 有一个错误，它们希望您将 "className" 与 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 将为您提供 resolved 版本（例如，相对路径扩展为完整的）。类似地，输入元素的 value 属性仅从 "value" 属性 初始化 ，之后它开始了自己的生命（通常，但并非总是如此，反映为 defaultValue).

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

How can I apply CSS to elements created with javascript in IE?

html

javascript

css

internet-explorer