Question

我正在尝试创建一个按钮，使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>

Answer 1

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

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

演示：Fiddle

Answer 2

尝试访问元素的当前样式时，应使用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>

点击按钮显示reclick消失

2 个答案:

试一试：