空白跨度元素不可见答案

【问题标题】：Blank Span Element Not Visible空白跨度元素不可见
【发布时间】：2016-07-29 05:47:52
【问题描述】：

我的 html 中有以下 span 元素

<span style="float: right;color: red; display: inline-block;" id="antcl_error"></span>

但是当我检查它的可见性时，它说不可见

$(document.body).find("#antcl_error").is(":visible");

如果 Span 为空，上述代码返回 false

【问题讨论】：

有什么问题？这是documentation 的一部分
@4castle 为什么当我的 span 元素在屏幕上可见时它给出 false
如果元素占用了文档中的空间，则认为它们是可见的。可见元素的宽度或高度大于零。
你确定它在屏幕上可见吗？它认为宽度为 0 或高度为 0 的元素是不可见的。
好的，但是如何检查空元素的可见性

标签： jquery html angularjs

【解决方案1】：

由于span是浮动的，没有内容，也没有宽高，所以不占用文档空间，因此被认为是不可见的：

您可以检查 CSS 的可见性值：

if($("#antcl_error").css('visibility') != "hidden") {
   // visible
}

根据文档：

如果元素占用了文档中的空间，则认为它们是可见的。可见元素的宽度或高度大于零。

具有可见性的元素：隐藏或不透明度：0 被认为是可见的，因为它们仍然会占用布局中的空间。

【讨论】：

【解决方案2】：

检查css显示模式是否为none：

if($('body').find("#antcl_error").css('display') != "none") {
   alert('visible')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span style="float: right;color: red; display:inline-block;" id="antcl_error"></span>

【讨论】：

【解决方案3】：

如上一个帖子所述： WordPress removes empty span tag

您可以使用通用 css 将样式元素设置为空的跨度块，并在跨度内放置一个
标记。然后在您的 css 样式表中应用 display:none;到跨度内的
标记以删除不需要的空间，同时保留样式元素并使其仍然显示。（这取决于您的主题结构）

【讨论】：