Question

嗨我有一个隐藏的div，里面有我可见的跨度。如果span没有display none属性，我想提醒一些文本。

<head>
    <script type="text/javascript">
        $(function() {
            if($('span').is(':visible')){
                alert(0)
            }
        })
    </script>
</head>
<body>
    <div class="fa" style="display:none">
        <span>sdf</span>
    </div>
</body>

Answer 1

根据jQuery API

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

您的<span>是隐私<div>的{{1}}的孩子 - 这意味着display: none和<div>都没有消耗任何空间文档。

这意味着您的<span>被隐藏，而且您的脚本没有错误 - 它完全符合它的预期。

Answer 2

您不导入jQuery。

在head元素中添加此内容：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

请注意，HTML文件还必须包含HTML开始和结束元素，最好是doctype。以下文件有效：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
      if($('span').is(':visible')){
       alert(0)
    }})
    </script>
</head>
<body>
<div class="fa" style="display:none">
<span>sdf</span>
</div>
</body>
</html>

它什么也没做，因为你的跨度是一个没有显示的div。

现在，如果你想要准确地知道你的元素是否没有直接在其上设置样式display = none，那就测试它：

if ($('span').get(0).style.display!='none') {

Demonstration

Answer 3

警报未触发的原因是您的span不可见。它包含在具有display: none的元素中的事实意味着它将不会显示。如果您特别想要检查它本身是否为display: none，请使用css。

        if($('span').css('display') != "none"){
            alert(0)
        }

Answer 4

你的问题是包含span元素的div有display：none作为属性，试试这个Fiddle，你只需把display：hidden而不是none，JS就可以了。

<div class="fa" style="display:hidden"><span>sdf</span></div>

如何使用jquery获取可见元素

4 个答案: