Question

我开始使用Cheerio在网页上使用Node查找元素，而我却很难做到：我想检测一些元素是否在页面上可见。我知道有一些方法可以隐藏一个元素：显示可以设置为none，可见性可以设置为隐藏，并且很容易检查，因为它们是元素本身的属性。

可以将这些属性检查为

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

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

在浏览器上，getComputedStyle可以实现此目的，但是使用Cheerio则无法正常工作。

那么，当Cheerio由于某些父母而被隐藏时，怎么能检测到隐藏元素呢？

Answer 1

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

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

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

注意：：如果您的元素中没有显示样式属性，您将获得“ 未定义”。因此，请确保在代码中进行处理。

因此您可以使用next（）和prev（）构建向上和向下函数来测试父元素和子元素

Answer 2

试试这个

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

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

用cheerio

3 个答案: