js设置隐藏显示

在JavaScript中，控制元素的隐藏和显示通常通过修改元素的CSS样式属性来实现。

基础概念：

display属性：用于设置元素的显示方式，如block（块级元素显示）、none（隐藏元素）等。
visibility属性：用于设置元素的可见性，visible表示可见，hidden表示隐藏，但元素仍占据空间。

相关优势：

可以动态地控制页面布局和内容展示，提高用户体验。
能够实现复杂的交互效果，如动画、过渡等。

类型：

使用display属性控制显示和隐藏。
使用visibility属性控制可见性。

应用场景：

导航菜单的展开和收起。
弹窗、提示框的显示与隐藏。
内容区域的切换和加载。

示例代码：

使用display属性控制显示和隐藏：

<!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>Document</title>
    <style>
        #myElement {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <button onclick="toggleDisplay()">Toggle Display</button>
    <div id="myElement">这是一个元素</div>

    <script>
        function toggleDisplay() {
            var element = document.getElementById('myElement');
            if (element.style.display === 'none') {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        }
    </script>
</body>

</html>

使用visibility属性控制可见性：

<!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>Document</title>
    <style>
        #myElement {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <button onclick="toggleVisibility()">Toggle Visibility</button>
    <div id="myElement">这是一个元素</div>

    <script>
        function toggleVisibility() {
            var element = document.getElementById('myElement');
            if (element.style.visibility === 'hidden') {
                element.style.visibility = 'visible';
            } else {
                element.style.visibility = 'hidden';
            }
        }
    </script>
</body>

</html>

常见问题及解决方法：