Как скрыть элемент по условию в JavaScript?

Question

Я собираюсь установить параметр для iframe, который устанавливается в 1 или 0. Затем, если параметр равен 1, деление на class="badge" будет видно, иначе скрыться.

Как я могу определить это условие в 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 должно быть именемваш параметр хранится в переменной.

Кроме того, вы можете установить display: block в вашем 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;
    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');
}

Проверьте документы здесь