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 to check the visibility property with javascript
getComputedStyle
is a global method. Use it as follows:
window.getComputedStyle(el, null).getPropertyValue('visibility');
How do I check if an element is really visible with JavaScript?
For the point 2.
I see that no one has suggested to use document.elementFromPoint(x,y)
, to me it is the fastest way to test if an element is nested or hidden by another. You can pass the offsets of the targetted element to the function.
Here's PPK test page on elementFromPoint.
From MDN's documentation:
The
elementFromPoint()
method—available on both the Document and ShadowRoot objects—returns the topmost Element at the specified coordinates (relative to the viewport).
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.
Detect visibility of mesh which could possibly be hidden by object
I recommend a simple algorithm with two steps:
- First, check if the given point is in the view frustum at all. The code for implementing this feature is shared in: three.js - check if object is still in view of the camera.
- If the test passes, you have to verify whether the point is occluded by a 3D object or not. A typical way for checking this is a line-of-sight test. Meaning you setup a raycaster from your camera's position and the direction that points from your camera to the given point. You then test if 3D objects in your scene intersect with this ray. If there is no intersection, the point is not occluded. Otherwise it is and you can hide the respective label.
Three.js - How to check if an object is visible to the camera
You want to look at Occlusion Culling techniques. Frustum culling works fine and is not what you are describing. Frustum culling just checks if an object (or its bounding box) is inside the camera pyramid. You perform Occlusion culling in addition to Frustum Culling specially when you want to eliminate objects which are occluded by other objects inside the view frustum. But it is not an easy task.
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.
Related Topics
How to Copy Multiple Files and Keep the Folder Structure with Gulp
Semantic-Ui Modal Size Keeps Extending to the Height of a Page
JavaScript Date Is Invalid on iOS
Modify CSS Classes Using JavaScript
How to Add CSS Hack Specifically for Ie10
Detecting Load of <Link> Resources
How to Build SASS/Less/CSS in Webpack Without Requiring Them in My Js
Tinymce Customize "File" Menubar
How to Enable the JavaScript Error/Debug Console for Safari Within Android
How to Make the Whole Card Component Clickable in Material UI Using React Js
Dynamically Modify Webkit Animation with JavaScript
How to Dynamically Change the Style Tag Using JavaScript
Fixing Sub-Pixel Rounding Issue in a CSS Fluid Grid
How to Set Width of <Div> to Fit Constant Number of Letters in Monospace Font
Disable iPhone "Save Image" Popup
Using Class with Angular VS Ng-Class While Using a Mixed Expression