Check Element CSS Display With JavaScript

Check element CSS display with JavaScript

As sdleihssirhc says below, if the element's display is being inherited or being specified by a CSS rule, you'll need to get its computed style:

return window.getComputedStyle(element, null).display;

Elements have a style property that will tell you what you want, if the style was declared inline or with JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

will give you a string value.

Javascript check css whether div display

It's a lot easier to give the element a class that will hide it, then just toggle the class.

.hide {  display: none;}

<button onclick="toggleHide()">Click This</button><div id="divContent" class="hide">div</div>
<script>  function toggleHide() {    document.getElementById('divContent').classList.toggle('hide');  }</script>

Get the display property value of an element

The value isn't set as "hidden" isn't a valid value. Try:

trs[1].style.display = "none";
console.log(trs[1].style.getPropertyValue('display'));

if display is block change it to none with javascript

try this,

document.querySelector("button").addEventListener("click", changeDiv);function changeDiv(){ var element = document.getElementById("element1");    element.style.display = (element.style.display == 'none') ? 'block' : 'none';}

#element1{display:block}

<div id="element1">Sample</div><button>Click here</button>

Check if element is visible in DOM

According to this MDN documentation, an element's offsetParent property will return null whenever it, or any of its parents, is hidden via the display style property. Just make sure that the element isn't fixed. A script to check this, if you have no position: fixed; elements on your page, might look like:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

On the other hand, if you do have position fixed elements that might get caught in this search, you will sadly (and slowly) have to use window.getComputedStyle(). The function in that case might be:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

Option #2 is probably a little more straightforward since it accounts for more edge cases, but I bet its a good deal slower, too, so if you have to repeat this operation many times, best to probably avoid it.

Check, using jQuery, if an element is 'display:none' or block on click

You can use :visible for visible elements and :hidden to find out hidden elements. This hidden elements have display attribute set to none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

To check particular element.

if($('#yourID:visible').length == 0)
{

}

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero,
Reference

You can also use is() with :visible

if(!$('#yourID').is(':visible'))
{

}

If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}

If you are using display the following values display can have.

display: none

display: inline

display: block

display: list-item

display: inline-block

Check complete list of possible display values here.

To check the display property with JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";

I set the display property of an HTML element in CSS. But, if I check that value in javascript it shows blank

Instead of using

el.style.display

Use

getComputedStyle(el).display

more info

How can I check that an element is visible with Puppeteer and pure JavaScript?

I found that Puppeteer has an API method for this purpose: Page.waitForSelector, via its visible option. I wasn't aware of the latter option, but it lets you wait until an element is visible.

await page.waitForSelector('#element', {
  visible: true,
})

Conversely you can wait for an element to be hidden, via the hidden option.

I think this is the idiomatic answer, with regards to the Puppeteer API. Thanks to Colin Cline though as I think his answer is probably useful as a general JavaScript solution.

Check Element CSS Display With JavaScript