Question

我一直在尝试为文本框创建自动完成功能，其中用户输入前几个字符，系统向他们显示以用户给定输入开头的条目列表。这些条目从数据库中获取并通过javascript显示在UI中。这一切都很完美，除了好的ol＆＃39; Internet Explorer，其中样式表属性不适用于由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）下拉列表的样式表让我疯了！有人请帮忙。我在这里结束了我的智慧。（同样的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和{{1 JavaScript中的保留字，当定义它时，JavaScript不允许您使用保留字作为属性名称文字（现在它），但大多数其他反射属性与它们反映的属性具有相同的名称：

for =＆gt; element.setAttribute("class", x)
element.className = x =＆gt; labelElement.setAttribute("for", x)
labelElement.htmlFor = x =＆gt; element.setAttribute("id", x)
element.id = x =＆gt; formElement.setAttribute("target", x)
formElement.target = x =＆gt; linkElement.setAttribute("rel", x)
linkElement.rel = x =＆gt; element.setAttribute("src", x)（element.src = x，script，...）

有时会有轻微的差异。例如，img会为您提供element.getAttribute("href")属性的实际文本，但href会为您提供已解析的版本（例如，相对路径已扩展为完整版）那些）。类似地，输入元素的element.href属性仅来自value属性的初始化，之后它具有自己的生命（通常但不总是反映为"value"）。

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

1 个答案: