Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng ẩn đầu vào DOM HTML

Đối tượng ẩn đầu vào HTML DOM đại diện cho phần tử có type =”hidden” của tài liệu HTML.

Tạo đối tượng ẩn đầu vào -

Cú pháp

Sau đây là cú pháp -

var hiddenInput = document.createElement(“INPUT”);
hiddenInput.setAttribute(“type”,”hidden”);

Thuộc tính

Sau đây là các thuộc tính của Đối tượng ẩn đầu vào HTML DOM -

loại Giá trị
Thuộc tính
Giải thích
biểu mẫu
Nó trả về trích dẫn của biểu mẫu có chứa trường nhập ẩn.
tên
Nó trả về và thay đổi giá trị của thuộc tính name của trường đầu vào ẩn.

Nó trả về giá trị của thuộc tính kiểu của trường đầu vào.
defaultValue
Nó trả về giá trị của thuộc tính kiểu của trường đầu vào.
defaultValue
Nó trả về và sửa đổi giá trị mặc định của trường nhập ẩn.

Nó trả về và sửa đổi giá trị của thuộc tính value của trường đầu vào ẩn.

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng ẩn đầu vào HTML DOM -

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#F19A3E;
      color:#fff;
   }
   .btn{
      background-color:#3C787E;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
      color:#fff;
   }
   input{
      border:1px solid #fff;
      background-color:transparent;
      color:#fff;
      padding:8px;
      outline:none;
   }
   input::placeholder{
      color:#fff;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input Hidden Object Example</h1>
<input type="text" placeholder="Enter your name" class="input-field">
<button onclick="showHide()" class="btn">Click to show/hide input field</button>
<script>
   function showHide() {
      var inputField = document.querySelector(".input-field");
      if(inputField.type === 'text'){
         inputField.type='hidden';
      } else {
         inputField.type='text';
      }
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng ẩn đầu vào DOM HTML

Nhấp vào “ Nhấp để hiển thị / ẩn trường nhập ”Để ẩn trường nhập -

Đối tượng ẩn đầu vào DOM HTML