using the below code i am finding if a div is invisible.
if(document.getelementbyid("header").style.visible){
alert("Yes");
}
else{
alert("No");
}
checking the visible property because in the code behind header.visible = false is defined depending upon the condition. But it always returning "No". Please tell the correct way.
There isn't a visible property, but visibility, and it can have the following values:
visible
hidden
collapse
See the MDN article.
visible property in CSS. Only visibilityYou can use display and visibility to check if element is visible or not
var elem = document.getelementbyid("header");
if(elem .style.visibility == "hidden" || elem.style.display == 'none'){
alert("No"); // element is visible
}
else{
alert("Yes");
}
Remember that there is not style.visible in javascript. Depending on how do you hide a div, you need to check
if(document.getelementbyid("header").style.visibility != "hidden") {
//visible
} else {
//not visible
}
or
if(document.getelementbyid("header").style.display != "none") {
//visible
} else {
//not visible
}
At the same time, above code will only check if exact element has display none or visibility hidden. But at the same time, it will return visible when parent element is not visible. Because of that, you may do next:
var element = document.getelementbyid("header");
if(element.offsetWidth > 0 || element.offsetHeight > 0) {
//visible
} else {
//not visible
}
Browser always returns 0 width and height of an element if it is not visible
If you're using jQuery:
var isVisible = $("#header").is(":visible");
The CSS property is visibility. Bear in mind that the property may not contain the value you expect if it has been set using CSS, rather than by the style attribute.
