点击按钮无法显示指定div的问题求助（附代码）

嘿，我看了你的代码，问题其实出在获取DOM元素的那一步，咱们一步步来捋：

问题根源 #

你用了document.getElementsByClassName("abc")，但这个方法返回的是HTMLCollection（类数组对象），它包含了所有匹配abc类名的元素，而不是单个DOM元素。所以你直接给这个集合加.style.display是无效的——因为集合本身没有style属性呀！

解决办法 #

有两种简单的修复方式，选哪种都可以：

方式1：从集合中取出第一个元素 #

因为你的页面里只有一个class为abc的div，直接取集合的索引0就行：

function ok(){
  document.getElementsByClassName("abc")[0].style.display="block";
}

方式2：用querySelector更简洁 #

document.querySelector(".abc")会直接返回匹配选择器的第一个元素，代码更清爽：

function ok(){
  document.querySelector(".abc").style.display="block";
}

修正后的完整代码 #

<!doctype html>
<html>
<head>
<style>
div.abc {
  width: 500px;
  height: 50px;
  background-color: red;
  display: none;
}
</style>
</head>
<body>
<button onclick="ok()"> Helloo </button>
<div class="abc">
  Your Name <input type="text">
  Your Name <input type="text">
</div>
<script>
function ok(){
  document.querySelector(".abc").style.display="block";
}
</script>
</body>
</html>

测试一下，点击按钮后div应该就能正常显示啦！

内容的提问来源于stack exchange，提问作者user9228388