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

Đối tượng nhãn HTML DOM

Đối tượng nhãn DOM HTML trong HTML đại diện cho phần tử

Cú pháp

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

Tạo phần tử

var labelObject = document.createElement(“LABEL”)

Thuộc tính

Đây, “LabelObject” có thể có các thuộc tính sau -

Thuộc tính Mô tả
Kiểm soát Nó trả về quyền kiểm soát nhãn
biểu mẫu Nó trả về một tham chiếu của biểu mẫu bao có chứa nhãn
htmlFor Nó trả về / đặt giá trị của thuộc tính for của nhãn

Ví dụ

Hãy để chúng tôi xem một ví dụ cho Nhãn htmlFor tài sản -

<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</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>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="Change Editor">
<div id="divDisplay">Label for attribute set as editor two</div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var labelSelect = document.getElementById("CurrentEditor");
   function getEventData() {
      if(labelSelect.htmlFor === 'editorTwo'){
         divDisplay.textContent = 'Label for attribute set as editor one';
         labelSelect.htmlFor = 'editorOne';
      }
   }
</script>
</body>
</html>

Đầu ra

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

Trước khi nhấp vào ‘Thay đổi trình chỉnh sửa’ nút -

Đối tượng nhãn HTML DOM

Sau khi nhấp vào ‘Thay đổi trình chỉnh sửa’ nút -

Đối tượng nhãn HTML DOM