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

Question

我需要检查HTML元素（任何元素都可以）是否没有内容。按内容我不是指文本内容或任何其他HTML元素，因为这已经是给定的。我的意思是想检查它是否只是一个空白元素。例如：

如果我隐藏链接，唯一剩下的就是段落元素，它现在是空白的。它上面没有任何样式，所以它只是一个带有margin / padding /的透明容器，但没有其他 visual 样式。有没有办法在Javascript中检测到这一点？任何奇怪的浏览器怪癖都可以。丑陋的解决方案也有效。

Answer 1

您希望以递归方式遍历元素的childNodes并检查它们是否全部为空白。递归步行逻辑并不困难。这完全取决于你如何定义一个空白元素：

显示：无
或能见度：隐藏的 或者所有符合以下条件：

• 文字
  • 无
  • 或仅限空格
  • 或文字颜色是透明的
  • 或文字颜色与父母的背景颜色相同
• 的背景
  • 透明
  • 匹配父
• 的边界
  • 风格：无
  • 或宽度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;
}

我没有对此进行测试，但这至少是一个开始。

Answer 2

您可以使用删除所有HTML然后修剪结果的方法。

如果结果是空字符串，则没有可见文本。

这不会检测具有高度和背景颜色的div，但是你需要这种检测，你还需要查看while子树查找具有任何可见css的元素，这需要非常详细的代码。 / p>

Answer 3

要检测空内容标记，您可以迭代每个节点的所有子节点，并查找非空文本节点。如果找到非空文本节点，则测试通过，否则该节点是空的内容。我做了一个似乎在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