js 控制元素显示与隐藏|极客笔记

js 控制元素显示与隐藏

在前端开发中，经常会遇到需要动态控制元素的显示与隐藏的情况。使用JavaScript可以很方便地实现这一功能，通过操作DOM来控制元素的显示与隐藏。本文将详细介绍如何使用JavaScript来实现控制元素显示与隐藏的效果。

HTML结构

首先，我们需要一个基本的HTML结构，以便用JavaScript来控制元素的显示与隐藏。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Elements</title>
</head>
<body>
    <button id="btn-show">Show Element</button>
    <button id="btn-hide">Hide Element</button>
    <div id="hidden-element" style="display: none;">
        This is a hidden element.
    </div>
</body>
</html>

在上面的HTML结构中，我们有两个按钮，一个用于显示元素，一个用于隐藏元素，并且还有一个默认是隐藏状态的<div>元素。

JavaScript实现

接下来，我们需要编写JavaScript代码来实现控制元素显示与隐藏的功能。我们可以使用DOM操作来实现这一目的。以下是JavaScript代码示例：

// 获取按钮元素和隐藏元素
const btnShow = document.getElementById('btn-show');
const btnHide = document.getElementById('btn-hide');
const hiddenElement = document.getElementById('hidden-element');

// 显示元素的函数
function showElement() {
    hiddenElement.style.display = 'block';
}

// 隐藏元素的函数
function hideElement() {
    hiddenElement.style.display = 'none';
}

// 给按钮添加点击事件监听
btnShow.addEventListener('click', showElement);
btnHide.addEventListener('click', hideElement);

在上面的JavaScript代码中，我们首先获取了按钮元素和隐藏元素的DOM对象，然后分别编写了显示元素和隐藏元素的函数。在这两个函数中，我们通过设置style.display属性来控制元素的显示与隐藏。最后，我们给按钮元素添加了点击事件监听，分别调用显示和隐藏元素的函数。