Question

我有一个div元素，我在css中将其显示设置为none。然后在我的main.js文件中，我想在点击一个按钮后将显示更改为阻止：

    var btnClick = document.getElementById("my-btn");

    btnClick.addEventListener("click", function() {
	var myDiv = document.getElementById("my-div");

	if (myDiv.style.display == "none") {
		myDiv.style.display = "block";
	}
    else {
			myDiv.style.display = "none";
		alert("here")
	}
    });

#my-div {   
    height: 50px;
    width: 50px;
    background-color: red;
    display: none;
  }

<div id="my-div"></div>

<button id="my-btn">Click</button>

但是当我点击按钮时没有任何反应。

Answer 1

应该是myDiv.style.display条件

var btnClick = document.getElementById("my-btn");

btnClick.addEventListener("click", function() {
    var myDiv = document.getElementById("my-div");
    if (myDiv.style.display == "none") {
       myDiv.style.display = "block";
    }
    else{
        myDiv.style.display = "none";
    }
});

Answer 2

您在myDiv.display中的代码存在问题，因为您的div没有display属性（它是style的属性），但是 - 即使style您无法立即访问display属性。

您无法使用element.style.X从css获取样式定义。为此，您需要使用window.getComputedStyle(element, null).getPropertyValue

以下是一个例子：

＆＃13;

var btnClick = document.getElementById("my-btn");
btnClick.addEventListener("click", function() {
  var myDiv = document.getElementById("my-div");
  if (myDiv.style.display == "none" || window.getComputedStyle(myDiv, null).getPropertyValue("display") == "none") {
      myDiv.style.display = "block";
  } else {
    myDiv.style.display = "none";
  }
});

＆＃13;

#my-div {
  height: 50px;
  width: 50px;
  background-color: red;
  display: none;
}

＆＃13;

<div id="my-div">
</div>

<button id="my-btn">Click</button>

＆＃13;

使用外部库（如jquery）这样的东西有充分的理由：）

如何在js中单击显示div

2 个答案: