根据输入框内容动态显示/隐藏标签：JavaScript 实现教程

本文旨在提供一种使用 JavaScript 根据输入框内容动态控制 HTML 标签显示与隐藏的方法。通过监听输入框的值，并结合 CSS 样式或 JavaScript 的 style 属性，可以实现当输入框为空时隐藏标签，反之则显示标签的交互效果。本教程将提供两种实现方案，并附带代码示例和注意事项，帮助开发者快速掌握该技巧。

方法一：使用 CSS 类名切换

此方法利用 CSS 的 display: none 属性来控制标签的显示与隐藏，并通过 JavaScript 切换 CSS 类名来实现动态效果。

1. 定义 CSS 类：

首先，在你的 CSS 文件（例如 style.css）中定义一个名为 hide 的 CSS 类，该类会将元素的 display 属性设置为 none，从而隐藏元素。

立即学习“Java免费学习笔记（深入）”；

.hide {
  display: none;
}

2. JavaScript 代码：

在 JavaScript 文件（例如 result.js）中，获取需要控制的标签元素和输入框的值。然后，使用 classList.toggle() 方法来切换标签的 hide 类。classList.toggle() 方法会根据条件判断是否添加或移除指定的类名。

window.addEventListener('load', () => {
    const cno = sessionStorage.getItem('CNO');
    const cap = sessionStorage.getItem('CAP');

    document.getElementById('result-cno').innerHTML = cno;
    document.getElementById('result-cap').innerHTML = cap;

    let t1w_1 = document.querySelector("#t1w_1");
    t1w_1.classList.toggle("hide", (cap === "" || cap === null)); // 当 cap 为空或 null 时，添加 hide 类
});

3. HTML 代码：

确保你的 HTML 文件（例如 result.html）包含需要控制的标签，并为其设置一个唯一的 ID。

燕雀Logo

为用户提供LOGO免费设计在线生成服务

101

查看详情

<label id="t1w_1">Name</label>
<span id="result-cap"/></span>

代码解释：

• document.querySelector("#t1w_1")：通过 CSS 选择器获取 ID 为 t1w_1 的标签元素。
• t1w_1.classList.toggle("hide", (cap === "" || cap === null))：如果 cap 变量的值为空字符串或 null，则添加 hide 类，隐藏标签；否则，移除 hide 类，显示标签。
• 添加了 cap === null 的判断，以处理 sessionStorage.getItem() 在没有找到对应 key 时返回 null 的情况。

方法二：直接修改 style.display 属性

此方法直接通过 JavaScript 修改标签的 style.display 属性来控制其显示与隐藏。

1. JavaScript 代码：

在 JavaScript 文件（例如 result.js）中，获取需要控制的标签元素和输入框的值。然后，使用 if 语句判断输入框的值是否为空，并根据判断结果设置标签的 style.display 属性。

window.addEventListener('load', () => {
    const cno = sessionStorage.getItem('CNO');
    const cap = sessionStorage.getItem('CAP');

    document.getElementById('result-cno').innerHTML = cno;
    document.getElementById('result-cap').innerHTML = cap;

    let t1w_1 = document.querySelector("#t1w_1");

    if (cap === "" || cap === null) {
        t1w_1.style.display = "none"; // 隐藏标签
    } else {
        t1w_1.style.display = "block"; // 显示标签 (或其他合适的 display 值)
    }
});

2. HTML 代码：

与方法一相同，确保你的 HTML 文件包含需要控制的标签，并为其设置一个唯一的 ID。

<label id="t1w_1">Name</label>
<span id="result-cap"/></span>

代码解释：

• t1w_1.style.display = "none"：将标签的 display 属性设置为 none，隐藏标签。
• t1w_1.style.display = "block"：将标签的 display 属性设置为 block，显示标签。 根据标签的类型，也可以设置为 inline 或 inline-block 等其他合适的 display 值。

注意事项

• sessionStorage 的使用： 示例代码使用了 sessionStorage 来传递数据。请确保在 index.js 中正确地将输入框的值存储到 sessionStorage 中。
• 事件监听： 示例代码使用了 window.addEventListener('load', ...) 来确保在页面加载完成后执行 JavaScript 代码。
• 错误处理： 在实际应用中，建议添加错误处理机制，例如检查 document.querySelector() 是否返回 null，以避免潜在的错误。
• 选择合适的 display 值： 在使用 style.display 属性控制标签显示时，需要根据标签的类型选择合适的 display 值。常用的值包括 block、inline 和 inline-block。
• 初始状态： 如果希望标签在页面初始加载时默认隐藏，可以在 CSS 中为标签添加 display: none 样式，或者在 JavaScript 代码中初始化 style.display 属性。

总结

本文介绍了两种使用 JavaScript 根据输入框内容动态控制 HTML 标签显示与隐藏的方法。第一种方法通过切换 CSS 类名来实现，代码更简洁，更符合关注点分离的原则。第二种方法直接修改 style.display 属性，更直观，但代码略显冗余。开发者可以根据实际情况选择合适的方法。希望本教程能够帮助你更好地理解和应用 JavaScript 技术。

以上就是根据输入框内容动态显示/隐藏标签：JavaScript 实现教程的详细内容，更多请关注php中文网其它相关文章！