单击按钮显示重新单击消失

Click button reveal reclick vanish

本文关键字：单击 消失 新单击 按钮 显示      更新时间：2023-09-26

我正在尝试制作一个按钮，使div在单击时出现并在重新单击时消失。我可以让它在单击时消失，但在重新单击时不会重新出现。我做错了什么？

function vanish1() {
  if (document.getElementById('priceCheck1').style.display.value == "none") {
    document.getElementById('priceCheck1').style.display = "block";
  }
  else {
    document.getElementById('priceCheck1').style.display = "none";
  }
}
<div>
<input type="button" class="input_button" name="onestarbtn" value="One Star" onclick="vanish1()"/>
</div>
<div id="priceCheck1">
        test1
</div>

display 值没有 value 属性（在 if 语句中），它是一个字符串，所以

function vanish1() {
    var el = document.getElementById('priceCheck1');
    if (el.style.display == "none") {
        el.style.display = "block";
    } else {
        el.style.display = "none";
    }
}

演示：小提琴

尝试访问元素的当前样式时，应使用 getComputedStyle() 方法。

试试吧：

function vanish1() {
    var p = document.getElementById('priceCheck1');
    p.style.display = (getComputedStyle(p).display == "none") ? "block" : "none";
}
<div>
    <input type="button" class="input_button" name="onestarbtn" value="One Star" onclick="vanish1()" />
</div>
<div id="priceCheck1">test1</div>

相关文章：