在网页开发中，我们经常需要根据用户的操作或者页面的特定逻辑来控制元素的显示与隐藏。对于 input 元素，这是一个非常常见的需求，比如在表单设计中，我们可能希望某些输入框在某些条件下不显示。下面，我将详细介绍如何使用 JavaScript 来实现 input 元素的隐藏和显示。
通过添加 Class 隐藏 Input 元素
首先，我们可以通过给 input 元素添加一个特定的 class 来实现隐藏。这种方法简单直接，并且可以和 CSS 一起使用，以实现更复杂的样式控制。
以下是一个简单的例子：
// 获取页面中所有的input元素
var inputs = document.querySelectorAll("input");
// 给第一个input元素添加一个名为"hidden"的class
inputs[0].classList.add("hidden");
在这个例子中，我们首先使用 document.querySelectorAll 来获取页面中所有的 input 元素。然后，我们选取第一个元素，并使用 classList.add 方法来添加一个名为 “hidden” 的 class。
在 CSS 中，我们可以这样定义 .hidden 类：
.hidden {
display: none;
}
这样一来，当 input 元素被赋予 “hidden” 这个 class 时，它就会从视图中消失。
直接修改 Style 隐藏 Input 元素
除了使用 class，我们还可以直接操作元素的 style 属性来改变其显示状态。这种方法非常直接，适合在 JavaScript 中进行动态控制。
下面是一个使用 style 属性隐藏 input 元素的例子：
// 获取页面中所有的input元素
var inputs = document.querySelectorAll("input");
// 直接设置第一个input元素的display样式为none
inputs[0].style.display = "none";
在这个例子中，我们使用 style.display 属性将 input 元素的显示属性设置为 "none"，使其不可见。
恢复 Input 元素的显示
如果需要恢复 input 元素的显示，我们可以执行相反的操作。
对于使用 class 隐藏的元素，可以使用以下代码来恢复显示：
// 获取页面中所有的input元素
var inputs = document.querySelectorAll("input");
// 移除第一个input元素的"hidden" class
inputs[0].classList.remove("hidden");
对于使用 style 属性隐藏的元素，可以使用以下代码来恢复显示：
// 获取页面中所有的input元素
var inputs = document.querySelectorAll("input");
// 设置第一个input元素的display样式为block
inputs[0].style.display = "block";
这样，input 元素就会重新出现在页面上。
总结
通过上述方法，我们可以轻松地控制 input 元素的显示和隐藏。这些方法简单且高效，是网页开发中常用的技巧之一。无论你是刚接触 JavaScript 的新手，还是经验丰富的开发者，这些技巧都值得掌握。