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

HTML DOM Input Thuộc tính tên ẩn

Thuộc tính tên ẩn đầu vào HTML DOM trả về và thay đổi giá trị của thuộc tính tên của trường đầu vào kiểu =”hidden” trong tài liệu HTML.

Cú pháp

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

1. Trả lại tên

object.name

2. sửa đổi tên

object.name=”text”

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính tên ẩ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;
      outline:none;
   }
   .show{
      color:#fff;
      font-size:1.2rem;
      font-weight:600;
   }
</style>
</head>
<body>
<h1>DOM Hidden name Property Example</h1>
Enter your Name:
<input type="hidden" class="input-field" name="Hi_I'm_hidden_input_field">
<button onclick="getName()" class="btn">Click to get name of hidden input field</button>
<div class="show"></div>
<script>
   function getName() {
      var inputField = document.querySelector(".input-field");
      var msgDiv= document.querySelector(".show");
      msgDiv.innerHTML=inputField.name;
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Input Thuộc tính tên ẩn

Bây giờ, hãy nhấp vào “ blue ”Để nhận giá trị thuộc tính name của trường nhập ẩn.

HTML DOM Input Thuộc tính tên ẩn