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.
How can I tell if a DOM element is visible in the current viewport?
Update: Time marches on and so have our browsers. This technique is no longer recommended and you should use Dan's solution if you do not need to support version of Internet Explorer before 7.
Original solution (now outdated):
This will check if the element is entirely visible in the current viewport:
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top >= window.pageYOffset &&
left >= window.pageXOffset &&
(top + height) <= (window.pageYOffset + window.innerHeight) &&
(left + width) <= (window.pageXOffset + window.innerWidth)
);
}
You could modify this simply to determine if any part of the element is visible in the viewport:
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
How to check if the element is visible
"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}
Finding if element is visible (JavaScript )
Display is not an attribute, it's a CSS property inside the style
attribute.
You may be looking for
var myvar = document.getElementById("mydivID").style.display;
or
var myvar = $("#mydivID").css('display');
How do I check if an element is hidden in jQuery?
Since the question refers to a single element, this code might be more suitable:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.
We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.
How can I check if an element exists in the visible DOM?
It seems some people are landing here, and simply want to know if an element exists (a little bit different to the original question).
That's as simple as using any of the browser's selecting method, and checking it for a truthy value (generally).
For example, if my element had an id
of "find-me"
, I could simply use...
var elementExists = document.getElementById("find-me");
This is specified to either return a reference to the element or null
. If you must have a Boolean value, simply toss a !!
before the method call.
In addition, you can use some of the many other methods that exist for finding elements, such as (all living off document
):
querySelector()
/querySelectorAll()
getElementsByClassName()
getElementsByName()
Some of these methods return a NodeList
, so be sure to check its length
property, because a NodeList
is an object, and therefore truthy.
For actually determining if an element exists as part of the visible DOM (like the question originally asked), Csuwldcat provides a better solution than rolling your own (as this answer used to contain). That is, to use the contains()
method on DOM elements.
You could use it like so...
document.body.contains(someReferenceToADomElement);
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 if element is visible in DOM in Node.js
I tried puppeteer instead of jsdom and I got correct display
value. Here is the snippet:
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(uri);
const searchDiv = await page.evaluate(() => {
const btn = document.querySelector('.search-outer-lg');
return getComputedStyle(btn).display;
});
console.log(searchDiv)
await browser.close()
})()
Related Topics
What Is This JavaScript "Require"
Why Does Chrome Debugger Think Closed Local Variable Is Undefined
Scroll to the Top of the Page Using JavaScript
Managing Jquery Plugin Dependency in Webpack
Angularjs: How to Pass Variables Between Controllers
JavaScript Implementation of Gzip
"Syntaxerror: Unexpected Token ≪ in Json At Position 0"
Controller Not a Function, Got Undefined, While Defining Controllers Globally
How to Check For a #Hash in a Url Using JavaScript
How to Set the Caret (Cursor) Position in a Contenteditable Element (Div)
How to Avoid 'Cannot Read Property of Undefined' Errors
Backslashes - Regular Expression - JavaScript
How to List the Properties of a JavaScript Object
Ruby's ||= (Or Equals) in JavaScript
What's the Right Way to Decode a String That Has Special HTML Entities in It
Jquery UI Autocomplete Positioning Wrong
How to Extend an Existing JavaScript Array with Another Array, Without Creating a New Array