用cheerio检测隐藏元素答案

【问题标题】：Detect hidden element with cheerio用cheerio检测隐藏元素
【发布时间】：2020-03-04 09:44:53
【问题描述】：

我开始使用 Cheerio 来使用 Node 在网页上查找元素，但我遇到了一些困难：我想检测页面上是否可见某些元素。我知道有一些方法可以隐藏一个元素：显示可以设置为无，可见性可以设置为隐藏，这些很容易检查，因为它们是元素本身的属性。

这些属性可以检查为

$('element').css('property') === 'valueWhichHides';

这种方法的问题在于它没有涵盖隐藏元素的另一种方式：它的某些父元素可能不可见。

在浏览器上getComputedStyle 可以实现这一点，但在 Cheerio 中它不起作用。

那么，当 Cheerio 由于某些父项而被隐藏时，如何使用 Cheerio 检测隐藏元素？

【问题讨论】：

标签： jquery node.js cheerio

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

我知道这有点晚了，但对于其他试图通过 Cheerio 完成这件事的人来说。我能找到的唯一解决方案是......

$(element).css('display');

这将获得匹配元素的样式属性的值。

注意：如果您的元素中没有显示样式属性，您将得到一个“undefined”。因此，请确保在代码中处理此问题。

所以你可以用 next() 和 prev() 构建一个 up 和 down 函数来测试父元素和子元素

【讨论】：

【解决方案3】：

根据offsetHeight，您可以测试此属性：如果值为0，则元素不可见。

$(function () {
  
  console.log("$('#btn').css('display') is: " + $('#btn').css('display'));
  
  console.log("document.getElementById('btn').offsetHeight is : " + document.getElementById('btn').offsetHeight);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div" style="display: none;">
    <buton id="btn">Clik Me</buton>
</div>

【讨论】：