查明元素或其任何祖先元素是否显示的高效方法：none

Question

我需要找到一种非常高效的方法来查明自定义元素或其任何父元素是否具有 display: none;

第一种方法：

checkVisible() {
  let parentNodes = [];
  let el = this;
  while (!!(el = el.parentNode)) {
    parentNodes.push(el);
  }
  return [this, ...parentNodes].some(el => getComputedStyle(el).display === 'none') 
}

还有比这跑得更快的吗？这甚至是一种安全的方法吗？

我需要这个的原因：我们有一个 <data-table> 自定义元素（本机 web 组件），它在 connectedCallback() 中完成了非常繁重的工作。我们有一个应用程序在单个页面中包含大约 20-30 个自定义元素，这导致 IE 11 需要大约 15 秒才能呈现页面。

我需要延迟那些最初甚至不可见的 <data-table> 组件的初始化，所以我需要一种方法来测试 connectedCallback() 元素是否可见（如果元素不可见）它位于最初未显示的 18 个选项卡之一中。

Answer 1

不确定性能，但至少应该比您的方法更快：

HTMLElement.prototype.isInvisible = function() {
  if (this.style.display == 'none') return true;
  if (getComputedStyle(this).display === 'none') return true;
  if (this.parentNode.isInvisible) return this.parentNode.isInvisible();
  return false;
};

Answer 2

查看元素或其父元素是否具有 display:none 的最简单方法是使用 el.offsetParent.

const p1 = document.getElementById('parent1');
const p2 = document.getElementById('parent2');
const c1 = document.getElementById('child1');
const c2 = document.getElementById('child2');
const btn = document.getElementById('btn');
const output = document.getElementById('output');

function renderVisibility() {
  const p1state = isElementVisible(p1) ? 'is visible' : 'is not visible';
  const p2state = isElementVisible(p2) ? 'is visible' : 'is not visible';
  const c1state = isElementVisible(c1) ? 'is visible' : 'is not visible';
  const c2state = isElementVisible(c2) ? 'is visible' : 'is not visible';
  
  output.innerHTML = `Parent 1 ${p1state}<br>Parent 2 ${p2state}<br/>Child 1 ${c1state}<br/>Child 2 ${c2state}`;
}

function isElementVisible(el) {
  return !!el.offsetParent;
}

function toggle() {
  p1.style.display = (p1.style.display ? '' : 'none');
  p2.style.display = (p2.style.display ? '' : 'none');
  renderVisibility();
}

btn.addEventListener('click', toggle),
renderVisibility();

<div id="parent1" style="display:none">
  <div id="child1">child 1</div>
</div>
<div id="parent2">
  <div id="child2">second child</div>
</div>
<button id="btn">Toggle</button>
<hr>
<div id="output"></div>

此代码将 el.offsetParent 转换为指示元素是否显示的布尔值。

This only works for display:none

查明元素或其任何祖先元素是否显示的高效方法：none

Performant way to find out if an element or any of its ancestor elements has display: none

javascript

css

web-component

custom-element

native-web-component