检查元素是否为空，为透明容器，为空

问题描述

| 我需要检查HTML元素（任何元素都可以）是否没有内容。对于内容，我不是指文本内容或任何其他HTML元素，因为这已经是给定的了。我的意思是要检查它是否只是一个空白元素。例如： 如果我隐藏链接，则剩下的唯一内容就是段落元素，现在为空白。它没有任何样式，因此它只是带有边距/填充/其他内容的透明容器，而没有其他视觉样式。有没有办法在Javascript中检测到这一点？任何奇怪的浏览器怪癖都可以。丑陋的解决方案也有效。

解决方法

您要递归遍历元素的childNode，并检查它们是否全部为空。递归步行逻辑并不困难。这实际上取决于您如何定义空白元素： 显示：无 或可见度：隐藏 或完全符合以下条件： 文本 没有 或仅空白 或文字颜色是透明的 或文字颜色与父母的背景颜色相同 背景 透明 匹配父母 边界 风格：无 或宽度0px 或颜色透明 或颜色与父级背景匹配 标签 不是

<img />

小孩儿 没有 或全部满足以上条件 因此，您的递归函数将如下所示：

if (!window.getComputedStyle)
{
    window.getComputedStyle = function(el)
    {
        return el.currentStyle || {};
    };
}
function isElementBlank(el)
{
    var style = window.getComputedStyle ? getComputedStyle(el,null) : el.currentStyle;
    if (style.display == \"none\" || style.visibility == \"hidden\")
    {
        return true;
    }
    if (el.tagName.toLowerCase() == \"img\")
    {
        return false;
    }
    var parentBG = \"transparent\";
    for (var parent = el.parentNode; parent; parent = parent.parentNode)
    {
        var parStyle = getComputedStyle(parent,null);
        if (parStyle.backgroundColor != \"transparent\")
        {
            parentBG = parStyle.backgroundColor;
            break;
        }
    }
    if (style.backgroundColor != \"transparent\" && style.backgroundColor != parentBG)
    {
        return false;
    }
    if (style.borderColor != \"transparent\" && 
        style.borderColor != parentBG && 
        parseInt(style.borderWidth) > 0 && 
        style.borderStyle != \"none\")
    {
        return false;
    }
    for (var i = 0; i < el.childNodes.length; i++)
    {
        var child = el.childNodes[i];
        if (child.nodeType == 3)
        {
            if (/\\S/.test(child.nodeValue) && 
                style.color != parentBG && 
                style.color != \"transparent\")
            {
                return false;
            }
        }
        else if (!isElementBlank(child))
        {
            return false;
        }
    }
    return true;
}

我没有对此进行测试，但这至少是一个开始。,您可以使用一种方法，其中删除所有HTML，然后修剪结果。 如果结果为空字符串，则没有可见的文本。 这将不会检测到具有高度和背景色的div，因此您需要这种检测，您还需要遍历while子树以查找具有任何可见CSS的元素，而这需要非常冗长的代码。,要检测内容为空的标记，您可以迭代每个节点的所有子节点并查找不为空的文本节点。如果找到一个不为空的文本节点，则测试通过，否则该节点的内容为空。我已经完成了一项在Firefox中运行正常的测试：

<div id=\"container\">
<div>Text <span>buzz</span>
</div>
<p><a href=\"#\">Hello</a>
</p>
</div>

<script>
var all = document.getElementsByTagName(\'body\')[0].getElementsByTagName(\'*\');


allNodes: for (var i = 0,l = all.length; i < l; i++) {

  // for each childNode of every node...
  for (var ii = 0,sub = all[i].childNodes,ll = sub.length; ii < ll; ii++) {

    // is it a text node?
    if (sub[ii].nodeType == 3) {
      // Is the text node NOT empty?
      if (/[^\\s]+/.test(sub[ii].nodeValue)) {
        continue allNodes;
      }

    }

  }

  console.log(all[i],\' fails\');

}
</script>

测试结果为：

<div id=\"container\"> fails
<p> fails