Question

我有一个要求，我不知道如何实现它。我有一个display:none的div，我获取要在控制台中使用document.getElementByName API显示的元素。我有可能阻止这种情况发生吗？

期望是否有display: none，当我访问它或其子代时，null应该是查询结果

＆＃13;

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

＆＃13;

#div2{
  display: none;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您只测试此元素，实际上无法知道元素是否可见。

唯一可行的方法是测试offsetWidth offsetHeight，如果两者都等于0，则表示元素在display:none上有两个元素，或者元素为空但你不在真的知道你是否填充这个元素后它会保持它们的偏移量等于0.此外，如果你的元素在visibility:hidden元素上，则元素的偏移量不会等于0.所以这个解决方案不是最好的。

很好地完成这项工作（没有框架）的唯一方法是测试此元素及其所有父母的display和visibility。

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>

Answer 2

如果你可以使用jQuery，那么解决方案就是：

$('test_fetch:visible')

否则，你必须求助于此：

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

上述解决方案的来源为here。

Answer 3

display: none不会阻止浏览器将该标记及相关资源加载到隐藏div或其中的元素will prevent the browser from applying css。在其显示值更改之前，它不会呈现为页面流的一部分。基本上，display：none和visibility：hidden对页面加载时间没有影响。您需要有选择地选择何时显示它，因为这会触发页面内容的重新呈现，即使这通常是一个微不足道的差异。

我建议如果您想等到需要加载内容，请不要将其包含在内，或者将空div包含为占位符，然后使用AJAX来获取内容一旦页面加载后需要来自服务器的内容，并使用JS将其添加到页面。如果可以，请尝试使用jQuery，因为它已经构建了AJAX init。

从jQuery你可以做到这样的事情： -

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

宾果！：）

display：none时停止获取DOM元素

3 个答案: