MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript使用CSS控制元素显示隐藏

2021-03-121.5k 阅读

JavaScript 与 CSS 控制元素显示隐藏基础概念

JavaScript 操作 CSS 原理

JavaScript 作为一种强大的脚本语言，在网页开发中扮演着至关重要的角色。它能够与 HTML 和 CSS 紧密结合，实现丰富的交互效果。当涉及到控制元素的显示与隐藏时，JavaScript 主要通过操作元素的 CSS 属性来达成目的。

在浏览器环境中，每个 HTML 元素都可以看作是一个对象，JavaScript 可以获取到这些对象，并对其属性进行读取和修改。CSS 属性作为描述元素样式的关键部分，自然也在 JavaScript 的可操作范围内。通过修改元素的 display、visibility 等 CSS 属性，JavaScript 就能实现元素显示与隐藏的效果。

例如，在 HTML 中有一个 <div> 元素：

<div id="myDiv">这是一个示例 div</div>

在 JavaScript 中，可以通过 document.getElementById 方法获取到这个 <div> 元素对象，然后就可以对其 CSS 属性进行操作。

var divElement = document.getElementById('myDiv');

CSS 控制显示隐藏的关键属性

  1. display 属性：display 属性是控制元素显示或隐藏最为常用的 CSS 属性。它有多个取值，常见的如 block、inline、inline - block、none 等。当 display 属性值为 none 时，元素将从文档流中完全移除，就好像该元素不存在一样，不会占据任何空间。而当值为 block、inline 或 inline - block 等其他非 none 值时，元素将按照相应的布局方式显示出来。

例如，要隐藏上述的 myDiv 元素，可以这样设置：

divElement.style.display = 'none';

要再次显示该元素，只需将 display 属性值设置为除 none 以外的合适值，比如 block：

divElement.style.display = 'block';
  1. visibility 属性：visibility 属性也用于控制元素的可见性。它有两个主要取值 visible 和 hidden。当 visibility 属性值为 visible 时，元素正常显示；当值为 hidden 时，元素虽然不可见，但仍然占据文档流中的空间。这与 display:none 有明显区别，display:none 会使元素从文档流中消失，而 visibility:hidden 只是让元素不可见，其空间依然保留。

例如，隐藏 myDiv 元素并保留其空间：

divElement.style.visibility = 'hidden';

显示该元素：

divElement.style.visibility = 'visible';
  1. opacity 属性：opacity 属性用于设置元素的透明度，取值范围是 0（完全透明，即不可见）到 1（完全不透明，即正常显示）。虽然它并非严格意义上的显示隐藏属性，但通过将 opacity 设置为 0，可以使元素看起来像是隐藏了。不过与 display:none 和 visibility:hidden 不同的是，设置 opacity:0 的元素仍然可以接收用户交互，比如点击事件等。

例如，使 myDiv 元素完全透明：

divElement.style.opacity = 0;

恢复不透明：

divElement.style.opacity = 1;

简单示例：按钮控制元素显示隐藏

HTML 结构搭建

首先，我们创建一个简单的 HTML 页面结构，包含一个按钮和一个需要控制显示隐藏的 <div> 元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮控制元素显示隐藏</title>
</head>

<body>
    <button id="toggleButton">切换显示隐藏</button>
    <div id="targetDiv">这是要显示隐藏的内容</div>
    <script src="script.js"></script>
</body>

</html>

JavaScript 实现逻辑

在 script.js 文件中编写 JavaScript 代码，实现点击按钮切换 <div> 元素显示隐藏的功能。这里我们使用 display 属性来实现。

// 获取按钮和目标 div 元素
var toggleButton = document.getElementById('toggleButton');
var targetDiv = document.getElementById('targetDiv');

// 为按钮添加点击事件监听器
toggleButton.addEventListener('click', function () {
    if (targetDiv.style.display === 'none') {
        targetDiv.style.display = 'block';
    } else {
        targetDiv.style.display = 'none';
    }
});

上述代码中，首先通过 getElementById 获取按钮和 <div> 元素。然后，使用 addEventListener 为按钮添加点击事件监听器。在点击事件处理函数中，通过判断 <div> 元素当前的 display 属性值来决定是显示还是隐藏该元素。

使用 visibility 属性实现同样功能

我们也可以使用 visibility 属性来实现相同的按钮控制元素显示隐藏功能。只需修改 JavaScript 代码如下：

// 获取按钮和目标 div 元素
var toggleButton = document.getElementById('toggleButton');
var targetDiv = document.getElementById('targetDiv');

// 为按钮添加点击事件监听器
toggleButton.addEventListener('click', function () {
    if (targetDiv.style.visibility === 'hidden') {
        targetDiv.style.visibility = 'visible';
    } else {
        targetDiv.style.visibility = 'hidden';
    }
});

这样，点击按钮时，会根据 visibility 属性当前的值来切换 <div> 元素的可见性。

复杂场景下的元素显示隐藏控制

多元素联动显示隐藏

在实际项目中，常常会遇到多个元素需要联动显示隐藏的情况。例如，一个导航菜单，当点击某个菜单项时，不仅该菜单项对应的内容区域要显示，其他菜单项对应的内容区域要隐藏。

假设我们有如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多元素联动显示隐藏</title>
    <style>
        .content {
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#" data - target="content1">内容 1</a></li>
        <li><a href="#" data - target="content2">内容 2</a></li>
        <li><a href="#" data - target="content3">内容 3</a></li>
    </ul>
    <div id="content1" class="content">这是内容 1</div>
    <div id="content2" class="content">这是内容 2</div>
    <div id="content3" class="content">这是内容 3</div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，实现多元素联动显示隐藏的代码如下：

// 获取所有菜单项和内容区域
var menuItems = document.querySelectorAll('ul li a');
var contentAreas = document.querySelectorAll('.content');

// 为每个菜单项添加点击事件监听器
menuItems.forEach(function (menuItem) {
    menuItem.addEventListener('click', function (event) {
        event.preventDefault();
        var targetId = this.dataset.target;
        // 隐藏所有内容区域
        contentAreas.forEach(function (contentArea) {
            contentArea.style.display = 'none';
        });
        // 显示目标内容区域
        var targetContent = document.getElementById(targetId);
        if (targetContent) {
            targetContent.style.display = 'block';
        }
    });
});

上述代码中，首先通过 querySelectorAll 获取所有菜单项和内容区域。然后，使用 forEach 为每个菜单项添加点击事件监听器。在点击事件处理函数中，先阻止链接的默认跳转行为，获取目标内容区域的 ID，隐藏所有内容区域，最后显示目标内容区域。

根据条件动态控制显示隐藏

有时候，元素的显示隐藏需要根据一些复杂的条件来决定，比如用户输入的值、系统时间等。以根据用户输入来显示隐藏元素为例，假设我们有如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据条件动态控制显示隐藏</title>
</head>

<body>
    <input type="text" id="inputField" placeholder="输入关键字">
    <button id="searchButton">搜索</button>
    <div id="resultDiv">
        <p>搜索结果将显示在此处</p>
    </div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，实现根据用户输入动态显示隐藏结果区域的代码如下：

// 获取输入框、按钮和结果区域
var inputField = document.getElementById('inputField');
var searchButton = document.getElementById('searchButton');
var resultDiv = document.getElementById('resultDiv');

// 为按钮添加点击事件监听器
searchButton.addEventListener('click', function () {
    var inputValue = inputField.value;
    if (inputValue.length > 0) {
        resultDiv.style.display = 'block';
    } else {
        resultDiv.style.display = 'none';
    }
});

上述代码中，当用户点击搜索按钮时，获取输入框的值。如果输入值长度大于 0，则显示结果区域；否则，隐藏结果区域。

动画效果与显示隐藏结合

淡入淡出效果

淡入淡出效果是一种常见的动画效果，结合元素的显示隐藏可以增强用户体验。通过使用 opacity 属性和 JavaScript 的定时器，我们可以实现淡入淡出效果。

假设我们有如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淡入淡出效果</title>
    <style>
        #fadeDiv {
            display: none;
        }
    </style>
</head>

<body>
    <button id="fadeButton">淡入淡出</button>
    <div id="fadeDiv">这是要淡入淡出的内容</div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，实现淡入淡出效果的代码如下：

// 获取按钮和目标 div 元素
var fadeButton = document.getElementById('fadeButton');
var fadeDiv = document.getElementById('fadeDiv');

// 标志当前是淡入还是淡出
var isFadingIn = false;

// 淡入函数
function fadeIn() {
    var opacity = 0;
    var fadeInterval = setInterval(function () {
        if (opacity >= 1) {
            clearInterval(fadeInterval);
            isFadingIn = false;
            return;
        }
        opacity += 0.1;
        fadeDiv.style.opacity = opacity;
        if (opacity === 1) {
            fadeDiv.style.display = 'block';
        }
    }, 100);
}

// 淡出函数
function fadeOut() {
    var opacity = 1;
    var fadeInterval = setInterval(function () {
        if (opacity <= 0) {
            clearInterval(fadeInterval);
            isFadingIn = false;
            fadeDiv.style.display = 'none';
            return;
        }
        opacity -= 0.1;
        fadeDiv.style.opacity = opacity;
    }, 100);
}

// 为按钮添加点击事件监听器
fadeButton.addEventListener('click', function () {
    if (isFadingIn) {
        fadeOut();
    } else {
        fadeDiv.style.display = 'block';
        fadeIn();
    }
});

上述代码中，定义了 fadeIn 和 fadeOut 两个函数分别实现淡入和淡出效果。通过 setInterval 定时器逐步改变 opacity 属性值，从而实现淡入淡出的动画效果。点击按钮时，根据当前状态决定是执行淡入还是淡出操作。

滑动显示隐藏效果

滑动显示隐藏效果也是一种很实用的动画效果。可以通过改变元素的 height 属性结合 overflow 属性来实现。

假设我们有如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动显示隐藏效果</title>
    <style>
        #slideDiv {
            overflow: hidden;
            height: 0;
            transition: height 0.3s ease;
        }
    </style>
</head>

<body>
    <button id="slideButton">滑动显示隐藏</button>
    <div id="slideDiv">
        <p>这是要滑动显示隐藏的内容</p>
    </div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，实现滑动显示隐藏效果的代码如下：

// 获取按钮和目标 div 元素
var slideButton = document.getElementById('slideButton');
var slideDiv = document.getElementById('slideDiv');

// 标志当前是显示还是隐藏
var isOpen = false;

// 滑动显示函数
function slideOpen() {
    var targetHeight = slideDiv.scrollHeight;
    slideDiv.style.height = targetHeight + 'px';
    isOpen = true;
}

// 滑动隐藏函数
function slideClose() {
    slideDiv.style.height = '0px';
    isOpen = false;
}

// 为按钮添加点击事件监听器
slideButton.addEventListener('click', function () {
    if (isOpen) {
        slideClose();
    } else {
        slideOpen();
    }
});

上述代码中，通过设置 overflow:hidden 隐藏超出部分，通过改变 height 属性值并结合 CSS 的 transition 过渡效果来实现滑动显示隐藏。点击按钮时，根据当前状态决定是执行滑动显示还是滑动隐藏操作。

性能优化与兼容性考虑

性能优化

  1. 批量操作：在操作多个元素的显示隐藏时，尽量采用批量操作的方式。例如，在多元素联动显示隐藏的场景中，先获取所有需要操作的元素，然后一次性进行显示或隐藏操作，而不是逐个元素进行操作。这样可以减少浏览器重排和重绘的次数，提高性能。

  2. 避免频繁改变样式：频繁改变元素的 CSS 属性会导致浏览器频繁重排和重绘，影响性能。比如在实现动画效果时，尽量使用 CSS 的 transition 或 animation 属性结合 JavaScript 控制动画的开始和结束，而不是通过 JavaScript 频繁改变 opacity、height 等属性值。

  3. 使用 requestAnimationFrame：在实现动画效果时，requestAnimationFrame 是一个很好的性能优化选择。它会在浏览器下一次重绘之前调用回调函数，能够保证动画的流畅性，并且比 setInterval 和 setTimeout 更节省性能。例如，在实现淡入淡出效果时，可以使用 requestAnimationFrame 替代 setInterval：

// 淡入函数
function fadeIn() {
    var opacity = 0;
    function fadeStep() {
        if (opacity >= 1) {
            isFadingIn = false;
            return;
        }
        opacity += 0.1;
        fadeDiv.style.opacity = opacity;
        if (opacity === 1) {
            fadeDiv.style.display = 'block';
        }
        requestAnimationFrame(fadeStep);
    }
    requestAnimationFrame(fadeStep);
}

兼容性考虑

  1. 浏览器前缀：在使用 CSS 的一些动画和过渡属性时，不同浏览器可能需要添加特定的前缀。例如，transform 属性在 WebKit 内核浏览器（如 Chrome、Safari）中需要添加 -webkit - 前缀，在 Firefox 中需要添加 -moz - 前缀，在 Opera 中需要添加 -o - 前缀。在实际开发中，要确保在不同浏览器下都能正常显示动画效果，就需要添加相应的前缀。

  2. 旧版本浏览器支持：对于一些旧版本的浏览器，可能对某些 JavaScript 特性或 CSS 属性支持不完善。例如，IE 浏览器对 querySelectorAll 方法的支持较晚，如果需要兼容旧版本 IE 浏览器，就需要使用其他替代方法，如 getElementsByTagName 结合遍历的方式来获取元素。

  3. 检测和回退：为了确保在各种浏览器环境下都能正常运行，最好进行特性检测。例如，检测浏览器是否支持 requestAnimationFrame，如果不支持，可以回退到使用 setTimeout 来实现类似的动画效果：

var requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        return window.setTimeout(callback, 1000 / 60);
    };

通过上述检测和回退机制，可以在不支持 requestAnimationFrame 的浏览器中仍然实现基本的动画效果。

结合框架或库进行显示隐藏控制

使用 jQuery

jQuery 是一个广泛使用的 JavaScript 库，它简化了 JavaScript 操作 DOM 的过程。在控制元素显示隐藏方面，jQuery 提供了简洁的方法。

假设我们有如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 jQuery 控制显示隐藏</title>
    <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
</head>

<body>
    <button id="jqueryButton">使用 jQuery 切换显示隐藏</button>
    <div id="jqueryDiv">这是使用 jQuery 控制的内容</div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，使用 jQuery 实现切换显示隐藏的代码如下：

// 为按钮添加点击事件监听器
$('#jqueryButton').click(function () {
    $('#jqueryDiv').toggle();
});

上述代码中，$('#jqueryButton') 是使用 jQuery 选择器选中按钮元素，click 方法为按钮添加点击事件监听器。$('#jqueryDiv').toggle() 方法用于切换 jqueryDiv 元素的显示隐藏状态，toggle 方法会根据元素当前的显示状态自动决定是显示还是隐藏元素。

使用 Vue.js

Vue.js 是一个流行的 JavaScript 框架，它采用数据驱动的方式来开发应用。在 Vue.js 中，可以通过控制数据来实现元素的显示隐藏。

假设我们有如下 Vue.js 项目结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Vue.js 控制显示隐藏</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="toggleVisible">切换显示隐藏</button>
        <div v - if="isVisible">这是使用 Vue.js 控制的内容</div>
    </div>
    <script src="script.js"></script>
</body>

</html>

在 JavaScript 中，Vue.js 的代码如下：

new Vue({
    el: '#app',
    data: {
        isVisible: false
    },
    methods: {
        toggleVisible: function () {
            this.isVisible =!this.isVisible;
        }
    }
});

上述代码中，通过 v - if 指令根据 isVisible 数据的真假来决定 <div> 元素的显示隐藏。点击按钮时，调用 toggleVisible 方法切换 isVisible 的值，从而实现元素的显示隐藏切换。

使用 React

React 也是一款非常受欢迎的 JavaScript 库，用于构建用户界面。在 React 中，同样通过状态来控制元素的显示隐藏。

假设我们有如下 React 项目结构（使用 JSX 语法）：

import React, { useState } from'react';

function App() {
    const [isVisible, setIsVisible] = useState(false);

    const toggleVisible = () => {
        setIsVisible(!isVisible);
    };

    return (
        <div>
            <button onClick={toggleVisible}>切换显示隐藏</button>
            {isVisible && <div>这是使用 React 控制的内容</div>}
        </div>
    );
}

export default App;

上述代码中，通过 useState 钩子函数定义了 isVisible 状态和 setIsVisible 更新函数。点击按钮时，调用 toggleVisible 函数更新 isVisible 状态，通过逻辑与操作符 && 根据 isVisible 的值来决定 <div> 元素是否渲染，从而实现显示隐藏效果。

通过结合这些框架或库，可以更高效、便捷地实现元素的显示隐藏控制，并且能够利用它们提供的其他特性来构建更复杂、交互性更强的网页应用。同时，不同的框架或库有各自的特点和适用场景，开发者可以根据项目需求选择合适的工具。