如何检查一个div元素是否可见？

Question

我有这样的选项卡。

<li id="singlechatpanel-1" style="visibility: hidden;">
     //content
</li>

尝试像这样进行检查：

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();

        if(!$("#singlechatpanel-1").is(':visible'))
        {
            alert("Room 1 is filled.");
            $("#singlechatpanel-1").css({'visibility':'visible'});
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }

条件语句总是返回 false。我该如何检查这个 div 元素的可见状态？

- Aristona

---

https://dev59.com/SnVC5IYBdhLWcg3wz0l9 - 001

Answer 1

检查它是否可见。

$("#singlechatpanel-1").is(':visible');

检查它是否隐藏。

$("#singlechatpanel-1").is(':hidden');

- Vipin Kumar R. Jaiswar

Answer 2

is(':visible') 检查元素的 display 属性，您可以使用 css 方法。

if (!$("#singlechatpanel-1").css('visibility') === 'hidden') {
   // ...
}

如果你将元素的display属性设置为none，那么你的if语句会返回true。

- Ram

---

一个关于为什么不能仅使用 $('..').css('display') 来检查是否为 none 的问题？作为一名 CSS 新手，我不太确定 :S - bitanath

@bitanath 请查看这个相关问题：https://dev59.com/V3VC5IYBdhLWcg3w-WOs - Ram

Answer 3

如果元素被jQuery隐藏，则使用：

if($("#elmentid").is(':hidden'))

- Shah Nawaz

Answer 4

你可以使用 .css() 来获取 "visibility" 的值：

 if( ! ( $("#singlechatpanel-1").css('visibility') === "hidden")){
 }

http://api.jquery.com/css/

- Pablo Martinez

Answer 5

if (!$('#singlechatpanel-1').css('display') == 'none') {
   alert('visible');
}else{
   alert('hidden');
}

- Prabhagaran

Answer 6

你可以使用(':hidden')方法查找你的div是否可见。如果在代码中多次使用同一元素，缓存该元素是一个好习惯。

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();
        var $chatPanel = $("#singlechatpanel-1");

        if(!$chatPanel.is(':hidden'))
        {
            alert("Room 1 is filled.");
            $chatPanel.show();
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }
});

- Sushanth --

Answer 7

将您的li添加到一个类中，在开始时执行$(".myclass").hide();来隐藏它，而不是使用可见性样式属性。

据我所知，jQuery使用display样式属性来显示/隐藏元素，而不是可见性（在这一点上可能是错误的，在任何情况下，以上值得尝试）。

- PhonicUK

Answer 8

你可以通过这两种方式中的任意一种实现它：

$("#elementId").css('visibility')
and
$("#elementId").is(':visible');

如果您的元素是 可见的，那么

$("#elementId").css('visibility') will return "visible"
and
$("#elementId").is(':visible') will return true

但如果您的元素不可见，那么

$("#elementId").css('visibility') will return undefined
and
$("#elementId").is(':visible') will return false

- Khabir