Question

HTML

<div id="greenn31"></div>

CSS

#greenn31{
    background-color:#093;
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 544px;
    margin-top: 51px;
    position:absolute;
    visibility:hidden;
}

的Javascript

if (!$("#greenn31").css('visibility') === 'hidden') {
               alert (source3);
               document.getElementById("greenn31").style.visibility = "visible";
               source3 = source3 - node31;
             }

我如何检查div green31的可见性？谢谢你的兴趣！

Answer 1

您的代码可以正常使用 Example Fiddle 。

我建议您使用display代替visibility当您想要隐藏元素时更有效（请参阅下面的差异）然后您可以使用jQuery函数{ {1}}与选择器is()。

带有:visible值的

display 属性将隐藏元素并隐藏页面中为此元素分配的空间。

带有none的

visibility 属性会隐藏该元素，但仍会在页面上为其分配空间。

希望这有帮助。

＆＃13;

hidden

＆＃13;

if ($("#greenn31").is(':visible')) {
  alert ("visible");
}else{
  alert ("hidden");
}

＆＃13;

#greenn31{
  background-color:#093;
  float: left;
  height: 25px;
  width: 25px;
  margin-left: 544px;
  margin-top: 51px;
  position:absolute;
  display:none;
}

＆＃13;

Answer 2

如果您已经将普通JS与jQuery混合，我建议切换到普通JS :)

var el = document.getElementById('greenn31');
var style = window.getComputedStyle(el);

if (style.visibility === 'hidden') {
    el.style.visibility = 'visible';
}

https://jsfiddle.net/zo2mbys4/

Answer 3

您可以尝试使用以下代码：

if ($("#greenn31").css('visibility') === 'hidden') {
    $("#greenn31").css({'visibility': 'visible'});
 }

如何检查div的可见性（javascript）

3 个答案: