Question

我有一张图片，我想在点击图片时带上文字。我将css显示属性应用于none，然后单击我将其更改为阻止。现在再次单击我想将显示更改为无。我怎么能这样做？

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");
}

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

使用javascript点击相同按钮，更改两种样式之间的css值

2 个答案: