js 隐藏元素

// 示例代码：隐藏一个 HTML 元素

// 方法 1: 使用 style.display = "none"
function hideElementById(elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        element.style.display = "none"; // 将元素的 display 样式设置为 none，从而隐藏元素
    }
}

// 方法 2: 使用 classList.add() 添加一个隐藏类
function hideElementByClass(elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        element.classList.add("hidden"); // 添加一个名为 "hidden" 的 CSS 类来隐藏元素
    }
}

// 在 CSS 中定义 .hidden 类
// .hidden {
//     display: none;
// }

// 调用示例：
// 假设有一个 id 为 "myElement" 的元素
// hideElementById("myElement");
// 或者
// hideElementByClass("myElement");

以上代码展示了两种常见的方法来隐藏页面中的 HTML 元素。第一种方法直接操作元素的 style.display 属性，将其设置为 "none"，这样元素将不再显示且不会占用页面空间。第二种方法通过添加一个 CSS 类（如 .hidden）来实现相同的效果。