HTML hidden 属性

htmlweb developmentfront end technology更新于 2025/11/28 13:32:17

HTML hidden 属性用于告知用户，具有 hidden 属性的元素与文档不再相关，并且不应被用户看到。

让我们看一个 hidden 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-hidden-attribute</legend>
<input type="text" id="textSelect" placeholder="Your Authorization Level">
<select id="selection1" hidden>
<option>Add user</option>
<option>Delete user</option>
<option>Modify user</option>
</select>
<select id="selection2" hidden>
<option>Mail admin</option>
<option>Call admin</option>
</select>
<input type="button" value="go" onclick="displaySelection()">
<div id="divDisplay">Hello</div>
</fieldset>
</form>
<script>
   var textSelect = document.getElementById("textSelect");
   var divDisplay = document.getElementById("divDisplay");
   var selection1 = document.getElementById("selection1");
   var selection2 = document.getElementById("selection2");
   function displaySelection() {
      if(textSelect.value === 'admin'){
         selection1.hidden = false;
         selection2.hidden = true;
         divDisplay.textContent = 'Welcome Admin';  
      } else if(textSelect.value === 'user'){
         selection2.hidden = false;
         selection1.hidden = true;
         divDisplay.textContent = 'Welcome User';
      } else{
         selection2.hidden = true;
         selection1.hidden = true;
         divDisplay.textContent = 'Your input does not match any authorization';
      }
   }
</script>
</body>
</html>

1) 使用用户权限级别 − 点击"Go"按钮