Question

我要为设置为1或0的iframe设置参数。如果参数为1，则class="badge"的div将显示为else隐藏。

如何在JavaScript中定义此条件？谢谢你的帮助:)）

这是我的HTML和CSS代码。

.badge {
    font-family: Tahoma;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #7bbded;
    color: white;
    border-radius: 0 0px 0 0;
    font-size: 10px;
    padding: 1px 6px 0 3px;
}

<iframe scrolling="no" style="" src="" frameborder="0">

<div id="main" style="width: 100%; height: 100%;">
<div class="ad-container" id="container">
<a href="#" target="_blank" onclick="cmp_link_clicked()">
<img class="text-icon" alt="آموزش های فرادرس" title="آموزش های فرادرس" src="https://beta.kaprila.com/a/images/video-icon.gif">
<h3 id="title">فیلم‌&nbsp;آموزشی <span class="important">تافل <span class="ltr">(TOEFL)</span></span> تشریح آزمون — <strong>کلیک کنید</strong></h3>

<div class="badge" id="badge" style="display: block;">
تبلیغات
</div>
</a>
</div>

</div>




</iframe>

Answer 1

首先，获得对div的引用：

var div = document.querySelector('.badge');

然后，添加一个新类，例如show：

if(parameter === 1){
 div.classList.add('show');
}

parameter应该是存储在var。

中的参数的名称

此外，您可以在css文件中设置display: block，而不是内联样式。

像这样：

.badge {
    font-family: Tahoma;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #7bbded;
    color: white;
    border-radius: 0 0px 0 0;
    font-size: 10px;
    padding: 1px 6px 0 3px;
    display:none; // ---> Hidden by default
}

.badge.show {
    display:block; // --> Visible only when you have .badge and .show classes in the same element
}

要删除课程，您可以使用classList.remove('show');

if(parameter === 0){
    div.classList.remove('show');
}

检查文档here

如何在JavaScript中按条件隐藏元素？

1 个答案: