Как проверить видимость сНа (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; 
      } 

Как я мог проверить видимость сНа green31? Спасибо за ваш интерес!

Answer 1

Ваш код хорошо работает Example Fiddle.

Я просто предлагаю использовать display вместо visibility это более эффективно, когда вы хотите, чтобы скрыть элементы (см ниже разницы), то вы можете использовать функцию JQuery is() с селектором :visible.

display атрибут со значением none будет скрывать элемент и скрывать также пространство, выделенное для этого элемента на странице.

visibility атрибут с hidden скроет элемент, но пространство, выделенное для него до сих пор на этой странице.

Надеюсь, это поможет.

---

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

Если вы уже смешивая простые 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'}); 
}