Question

我有一个（遗留的）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（严格或过渡）会破坏这一点。警报显示样式已设置为正确的值，但不显示子元素如果此功能可以与任何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;';

Answer 1

<强>更新：

我想知道在标准模式下处理文档时（文档是否有DOCTYPE），Firefox会插入一个隐含的元素，它不会在反向复制模式下插入（没有DOCTYPE），因此图像不是'是elem的直接孩子，而是这个隐含元素的孩子，然后是elem的孩子;所以你不会在elem.childNodes中看到图像。在调试器中遍历代码是告诉的最佳方式，但如果失败，请提醒您在循环中迭代的每个子节点的tagName。

例如，使用此标记：

<table id='theTable'>
    <tr><td>Hi there</td></tr>
</table>

... Firefox将插入tbody元素，因此DOM如下所示：

<table id='theTable'>
    <tbody>
        <tr><td>Hi there</td></tr>
    </tbody>
</table>

...但除非DOCTYPE是红鲱鱼，否则它不会是那个具体的例子，因为我刚刚测试过，Firefox甚至在反向竞争模式下也是如此。但也许您正在测试两个略有不同的文档？或者它可能仅在标准模式下使用某些元素。

<强>原始：

没有立即看到问题，但我确实看到了两个问题：

i未在函数中声明，因此您将成为Horror of Implicit Globals的牺牲品。由于您的警报显示正确的值，我不明白为什么会出现问题。
~~url(..)不使用引号。~~ Yes they can，可选。

Answer 2

JavaScript并不真正适用于纯HTML，而是在浏览器生成的DOM树上。因此，DOCTYPE对JavaScript没有直接影响，但对浏览器处理无效HTML和CSS的方式没有影响。

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

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

Answer 3

感谢ÁlvaroG。Vicario。虽然他没有给出确切的答案，但方向是正确的。我用w3c验证器检查了页面，发现我的Image对象缺少src属性。因此，添加img.src = "chrome://{appname}/content/dbutton.png";会有所帮助。

但是，我不确定，为什么原始代码作者使用background样式而不是src ...也许，这仍然是一个谜。：）

DOCTYPE打破了style.display

3 个答案: