Question

如果页面上没有div类，我试图显示SweetAlert弹出窗口，它似乎可以使用ID，但不能使用类。

如果页面上没有div类，谁能帮助此弹出窗口显示？

<div class="box">
    <img id="mainimage" src="image.jpg">
</div>

https://sweetalert2.github.io/

CDN https://cdn.jsdelivr.net/npm/sweetalert2@8

工作（我们有一个名为mainimage的ID，并且不显示弹出窗口。当我更改为mainimages时，它会按原样显示弹出窗口）

if (!document.getElementById("mainimage")) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

当我尝试检查是否存在排除的类名（carrd）时，它似乎不起作用或是否已更改为页面上的div

if (!document.getElementsByClassName("carrd")) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

Answer 1

从该函数的结果中检查length属性。

if (document.getElementsByClassName("carrd").length === 0) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

说明： getElementsByClassName 始终返回HTML集合，因此，它不能以您期望的方式使用！运算符

它与 getElementById 函数一起使用，因为它返回找到的元素，如果未找到任何元素，则返回 null 。

Answer 2

document.getElementsByClassName("carrd")

返回具有该类的元素的数组。使用下面的代码。

if(document.getElementsByClassName("carrd").length === 0)

如果页面上不存在Div类，则显示SweetAlert弹出窗口

2 个答案: