用JS创建的元素:focus在IE之除外的浏览器无效

元素是这么来的:

 var rootDiv = document.createElement("div");
 rootDiv.setAttribute("id", list[i].ID);
 rootDiv.setAttribute("class", "extent");

 var div = document.createElement("div");
 var input = document.createElement("input");
 input.setAttribute("type", "image");
 input.setAttribute("src", "/Content/Images/check.png");
 var p1 = document.createElement("p");
 var p2 = document.createElement("p");
 p1.setAttribute("class", "pinfo");
 p2.setAttribute("class", "pinfo");
 p1.innerHTML = "时间:" + new Date(list[i].SUBTIME).format("yyyy年MM月dd日");
p2.innerHTML = "备注:" + list[i].REMARK;
rootDiv.appendChild(input);
rootDiv.appendChild(div);
div.appendChild(p1);
div.appendChild(p2);
panel.appendChild(rootDiv);

css 是这样的:

 .extent:focus {
    border:2px solid #96C2F1;
    background-color: #EEFAFF
}

结果是在IE中,这是有效果的,但是在FF,CHROME等浏览者中没效果。还有就是如果我只是把那些元素直接写入HTML,也是有效果的

ie、chrome、firefox的添加元素和样式的语法不一样,你要想兼容,可以通过jquery进行添加试试。