JavaScript实现点击按钮显示/隐藏div块 - 简易教程

"JavaScript实现点击按钮显示/隐藏div块 - 简易教程"\n\n本教程介绍如何使用JavaScript实现点击按钮后显示或隐藏div块的功能。通过简单易懂的步骤，你将学会如何获取元素、添加事件监听器，并使用CSS控制div块的显示状态。\n\n步骤：\n\n1. 在HTML中添加div块和按钮：\n\nhtml\n<div id=\"myDiv\">这是一个div块</div>\n<button id=\"myButton\">点击按钮</button>\n\n\n2. 在JavaScript中获取元素和添加点击事件监听器：\n\njavascript\n// 获取div块和按钮的引用\nvar div = document.getElementById(\"myDiv\");\nvar button = document.getElementById(\"myButton\");\n\n// 添加点击事件的监听器\nbutton.addEventListener(\"click\", function() {\n // 判断div块的显示状态\n if (div.style.display === \"none\") {\n // 如果div块隐藏，则显示\n div.style.display = \"block\";\n } else {\n // 如果div块显示，则隐藏\n div.style.display = \"none\";\n } \n});\n\n\n通过以上步骤，当按钮被点击时，div块的显示状态会发生改变，从而实现div块的隐藏和显示。\n\n相关搜索：\nJavaScript 点击事件, JavaScript 元素显示隐藏, JavaScript 事件监听器, CSS display属性, HTML div标签, 按钮功能实现