Stop fetching the DOM element when display:none

Question

I have a requirement and am not sure how to achieve it. I have a div with display:none and I fetch the element to show in console with document.getElementByName API. Is there a possibility that I can stop this from happening?

The expectation is if it has a display: none, null should be the query result when I access it or its children

function fetchChildToNone(){
  var _ele = document.getElementsByName('test_fetch');
  console.log(_ele);
}

#div2{
  display: none;
}

<!DOCTYPE html>
<html>
<head>
 <title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
 <div id="div1">
  <span> A div to not make the page empty</span>
 </div>
 <div id="div2">
  <span id="test_fetch" name="test_fetch"> Hello World</span>
 </div>
</body>
</html>

Can you use jQuery? If yes, then you can write `$('test_fetch:visible')` — Jakub Jankowski, Oct 06 '16 at 08:39
@user2181397 - It's in the css - its parent has `display: none`. — enhzflep, Oct 06 '16 at 08:48
Sounds like the perfect time to make use of `window.getComputedStyle` to me. — enhzflep, Oct 06 '16 at 08:50

Steeve Pitis · Answer 1 · 2016-10-10T09:12:12.810

There is actually no way to know if an element is visible or not, if you are only testing this element.

The only available way is to test offsetWidth offsetHeight if there both equals to 0 that mean two things element is on display:none or element is empty but you don't really know if you fill this element after it will keep their offset equals to 0. Moreover if your element is on visibility:hidden element's offset will not be equals to 0. So this solution is not the best.

The only way to do this nicely (without framework) is to test display and visibility of this element and all his parents.

function fetchChildToNone(){
  var _ele = document.getElementsByName('test_fetch');
  
  console.log(isVisible(_ele[0]));
}

function isVisible(elem) {
  var style = window.getComputedStyle(elem, null);
  if(style.display === 'none' || style.visibility === 'hidden') return false;
  if(elem.parentNode && elem.parentNode.tagName !== 'body') return isVisible(elem.parentNode);
  
  return true;
}

#div2{
  display: none;
}

<!DOCTYPE html>
<html>
<head>
 <title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
 <div id="div1">
  <span> A div to not make the page empty</span>
 </div>
 <div id="div2">
  <span id="test_fetch" name="test_fetch"> Hello World</span>
 </div>
</body>
</html>

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — andreas, Oct 10 '16 at 08:56
You are right, sorry. I will edit my answer in order to provide an explanation. — Steeve Pitis, Oct 10 '16 at 09:00

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

If you can use jQuery, then the solution is this:

$('test_fetch:visible')

Otherwise, you have to resort to this:

if(_ele.offsetWidth > 0 || _ele.offsetHeight > 0)
{
    //element is visible, put your logic here.
}

Source of the solution above is here.

edited May 23 '17 at 12:00

Community

1
1

answered Oct 06 '16 at 08:44

Jakub Jankowski

731
2
9
20

score 0 · Answer 3 · answered Oct 06 '16 at 08:47

display: none will not prevent the browser from loading that markup and associated resources but it will prevent the browser from applying css to the the hidden div or the elements inside it. Until its display value changes, it is not rendered as part of the page flow . Basically, display: none and visibility: hidden have no impact on page load time. You need to selectively choose when to display it since that triggers a rerender of page content, and even that is usually a negligible difference in all.

I would suggest that if you want to wait to load the content until it's needed, don't include it at all or include empty divs as placeholders and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. Try to use jQuery if you can as it has inbuild AJAX init.

From jQuery you can do something like this :-

$(element).is(":visible")

Bingo !! :)

Stop fetching the DOM element when display:none

3 Answers3