如何解决检查元素是否为空,为透明容器,为空
| 我需要检查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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。