本文将详细介绍如何利用Javascript监听HTML元素的点击事件，并动态修改另一个DOM元素的CSS display 属性，从而实现元素的显示或隐藏功能。通过具体的代码示例，读者将学会如何构建交互式网页，例如点击按钮显示模态框，提升用户体验。
1. 理解核心概念
在网页开发中，经常需要根据用户的交互行为（如点击按钮）来动态改变页面元素的可见性。这通常涉及到两个核心概念：
事件监听 (Event Listening): Javascript能够监听用户在DOM元素上执行的特定动作，例如点击、鼠标悬停、键盘输入等。DOM操作 (DOM Manipulation): document Object Model (DOM) 是HTML和XML文档的编程接口。通过Javascript，我们可以访问和修改页面中的所有元素、属性和样式。本教程将专注于使用Javascript的点击事件来改变元素的 display 样式属性，实现元素的显示与隐藏。
2. HTML结构准备
首先，我们需要定义两个关键的HTML元素：一个作为触发点击事件的元素（例如一个按钮或一个 div），另一个是需要被控制显示与隐藏的目标元素（例如一个模态框或信息面板）。
立即学习“Java免费学习笔记（深入）”；
以下是示例的HTML结构：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制DOM元素显示与隐藏</title> <style> #modal { display: none; width: 370px; position: fixed; right: 2px; top: 0; z-index: 99; background-color: white; border-radius: 0px 0px 10px 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); padding: 20px; border: 1px solid #ccc; } #test { cursor: pointer; padding: 10px 15px; border: 1px solid #007bff; background-color: #e7f3ff; border-radius: 5px; display: inline-block; margin-top: 50px; } #test:hover { background-color: #d0e7ff; } </style></head><body> <!-- 触发显示/隐藏的按钮 --> <div id="test" class="br3 mb3 ph3 pv2 ba b--black-10 flex justify-between items-center pointer hover-b--primary5"> <div class="f5 flex items-center">点击我显示模态框</div> </div> <!-- 需要被控制显示/隐藏的模态框 --> <div id="modal"> <h3>这是一个模态框标题</h3> <p>这里是模态框的内容。点击触发按钮后，这个内容就会显示出来。</p> <button onclick="document.getElementById('modal').style.display = 'none';">关闭</button> </div> <!-- Javascript 代码将放在这里 --> <script> // Javascript 函数将在这里定义 </script></body></html>登录后复制在上述HTML中：
芦笋演示 一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。
34 查看详情 
#test 是触发元素，它有一个 id="test"。#modal 是目标元素，它有一个 id="modal"，并通过内联样式 或在 <style> 标签中设置 display: none; 来确保其初始状态是隐藏的。3. Javascript实现显示功能
要实现点击 #test 元素后显示 #modal 元素，我们可以使用Javascript来修改 #modal 的 display 属性。
3.1 使用 onclick 属性
最直接的方法是在触发元素的HTML标签中添加 onclick 属性，并指定一个Javascript函数。
<div id="test" onclick="showModal()" class="br3 mb3 ph3 pv2 ba b--black-10 flex justify-between items-center pointer hover-b--primary5"> <div class="f5 flex items-center">点击我显示模态框</div></div><script>function showModal() { // 获取ID为"modal"的元素 const modalElement = document.getElementById("modal"); // 将其display样式设置为"block"，使其可见 modalElement.style.display = "block";}</script>登录后复制代码解析：
document.getElementById("modal")：这是一个DOM方法，用于通过元素的 id 属性获取对应的HTML元素对象。.style.display = "block"：这是DOM元素对象的一个属性，允许我们直接修改元素的CSS样式。将其设置为 "block" 会使元素以块级元素的形式显示出来。3.2 使用 addEventListener (推荐)
虽然 onclick 属性简单易用，但在更复杂的应用中，推荐使用 addEventListener 方法。它允许为同一个元素添加多个事件监听器，且能更好地分离HTML结构与Javascript行为。
<script>document.addEventListener('DOMContentLoaded', function() { // 获取触发元素和目标元素 const triggerElement = document.getElementById("test"); const modalElement = document.getElementById("modal"); // 为触发元素添加点击事件监听器 triggerElement.addEventListener("click", function() { // 将模态框的display样式设置为"block"，使其可见 modalElement.style.display = "block"; }); // 假设模态框内部有一个关闭按钮 const closeButton = modalElement.querySelector('button'); if (closeButton) { closeButton.addEventListener('click', function() { modalElement.style.display = 'none'; }); }});</script>登录后复制代码解析：
document.addEventListener('DOMContentLoaded', ...)：确保在DOM完全加载和解析之后再执行Javascript代码，避免因元素尚未加载而导致的错误。triggerElement.addEventListener("click", function() { ... });：为 triggerElement 绑定一个 click 事件。当该元素被点击时，括号内的匿名函数将被执行。modalElement.style.display = "block";：与 onclick 方式相同，修改目标元素的 display 样式。示例中增加了一个关闭按钮的逻辑，演示如何隐藏模态框。4. 完整的示例代码
结合上述HTML结构和 addEventListener 方法，一个完整的示例代码如下：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制DOM元素显示与隐藏教程</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; } #test { cursor: pointer; padding: 12px 20px; border: 1px solid #007bff; background-color: #007bff; color: white; border-radius: 5px; display: inline-block; font-size: 16px; transition: background-color 0.3s ease; margin-top: 50px; } #test:hover { background-color: #0056b3; } #modal { display: none; width: 370px; position: fixed; right: 20px; top: 20px; z-index: 1000; background-color: white; border-radius: 8px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); padding: 25px; border: 1px solid #ddd; } #modal h3 { margin-top: 0; color: #333; } #modal p { color: #666; line-height: 1.6; } #modal button { background-color: #dc3545; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; float: right; margin-top: 15px; transition: background-color 0.3s ease; } #modal button:hover { background-color: #c82333; } </style></head登录后复制以上就是使用Javascript实现点击事件控制DOM元素显示与隐藏的详细内容，更多请关注php中文网其它相关文章！
