使用javascript单击同一按钮，在两种样式之间更改css值

Question

我有一个图像，我想在单击该图像时在其上添加文本。我将css display属性应用于none，并在单击时将其更改为block。现在再次单击，我想将显示更改为无。我该怎么做？

js:-

function showTerms(data){
    document.getElementById(data).style.display = 'block';
}

html:-

<div style="display: none;" id="text1111" class="offer_text size-12">
    <div class="TC">
        <div class="condition">Terms &amp; Condition</div>
    </div>
    <p></p>
    <div><br></div>
    <div>- The coupon code is valid for one time use per user account.<br></div>
    <p></p>

Answer 1

您可以通过切换功能来实现这一点，如下所示：

function toggleTerms(data){
    document.getElementById(data).style.display = (document.getElementById(data).style.display == 'block' ? 'none': 'block'); 
}

Answer 2

一般来说，不要直接在JavaScript中修改CSS（当然也有例外，但在这种情况下不应该）。

相反，定义一个CSS类，如下所示：

.shown {display: block}

那么您的JavaScript可以简单到：

function showTerms(data) {
    document.getElementById(data).classList.toggle("shown");
}

_{*如果需要对旧浏览器的支持，您需要更高级的东西来检查类是否打开并手动切换}