Wie die Sichtbarkeit eines div (Javascript)

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; 
      } 

überprüfen, wie ich die Sichtbarkeit von div green31 überprüfen könnte? Danke für Ihr Interesse!

Answer 1

Ihr Code funktioniert gut überprüfen Sie die Example Fiddle.

Ich werde nur display statt visibility zu verwenden, legen nahe, es ist effizienter, wenn Sie Elemente verstecken wollen (siehe den Unterschied unten), dann können Sie jQuery-Funktion is() mit :visible Selektor verwenden.

display Attribut mit none Wert wird das Element verbergen und verstecken auch den Raum für dieses Element auf der Seite zugeordnet.

visibility Attribut mit hidden wird das Element aber Raum verstecken, die immer noch auf der Seite für sie zugeordnet ist.

Hoffe, das hilft.

---

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="greenn31"></div>

Answer 2

Wenn Sie bereits Ebene JS mit jQuery mischen, würde ich auf Ebene JS Schalt vorschlagen :)

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

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

https://jsfiddle.net/zo2mbys4/

Answer 3

können Sie Versuchen Sie mit dem folgenden Code:

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