找出一个元素或它的任何祖先元素是否显示的有效方法:无
找出一个元素或它的任何祖先元素是否显示的有效方法:无
提问于 2018-10-29 22:10:13
我需要找到一种非常高效的方法来找出一个自定义元素或它的任何父元素是否有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>自定义元素(原生webcomponent)，它在其connectedCallback()中执行非常繁重的任务。我们有一个应用程序，在一个页面中有大约20-30个这样的自定义元素，这导致IE 11需要大约15秒才能呈现页面。
我需要延迟那些最初甚至不可见的<data-table>组件的初始化，因此我需要一种在connectedCallback()中测试元素是否可见的方法(如果元素在最初未显示的18个选项卡中，则不可见)。
回答 1
Stack Overflow用户
发布于 2018-10-29 22:24:58
不确定性能，但它至少应该比您的方法更快：
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;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53047318
复制相关文章
相似问题