本文旨在提供一种使用 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。
<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 技术。
