javascript - DOCTYPE中断style.display

我有一个（旧版）JS函数，该函数显示或隐藏参数元素的子节点。在mouseover和mouseout事件处理程序中使用它来隐藏img标签。
该函数如下所示：

function displayElem(elem, value, handlerRoot){
try{
    var display = 'inline';
    if(!value)
        display = 'none';
    if(handlerRoot)
        elem.style.display = display;
    var childs = elem.childNodes;
    for (i = 0; i < childs.length; i++){
        if(childs[i].nodeType == Node.ELEMENT_NODE){
            childs[i].style.display = display;
            alert("Node "+childs[i].tagName+" style set to " +childs[i].style.display);
        }
    }
}catch(e){
    alert('displayElem: ' + e);
}
}

在这里，value和handlerRoot是布尔标志。
如果目标html页面没有doctype，则此功能可以完美运行。添加任何文档类型（严格或过渡）都可以解决此问题。警报显示样式已设置为正确的值，但未显示子元素。
如果此功能可以与任何DOCTYPE一起使用，那就更好了。

图像（elem的子节点）是这样初始化的（这里可能出问题了吗？）：

var img = new Image();
img.style.cssText =
'background: transparent url("chrome://{appname}/content/dbutton.png") right top no-repeat;' +
'position: relative;' +
'height:18px;'+
'width:18px;'+
'display:none;';

最佳答案

JavaScript实际上不能在纯HTML上运行，而是在浏览器生成的DOM树上运行。因此，DOCTYPE不会直接影响JavaScript，而是会影响浏览器处理无效HTML和CSS的方式。

我认为第一步是清理HTML并确保其有效，尤其是。标记用于允许的位置并正确嵌套。这将确保无论渲染模式如何，生成的节点树都是相同的。

您还可以使用自己喜欢的浏览器工具（例如Firebug）检查真实的树，并确保将节点放置在您认为的位置。

关于javascript - DOCTYPE中断style.display，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4547416/