Thuộc tính nhãn tùy chọn DOM trả về và thay đổi giá trị của thuộc tính nhãn của một tùy chọn trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại nhãn
object.label
-
2. Sửa đổi nhãn
object.label = “text”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính nhãn tùy chọn -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Option label Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option label="Physics">Physics</option>
<option label="Maths">Maths</option>
<option label="Chemistry">Chemistry</option>
<option label="English">English</option>
</select>
<button onclick="showLabel()" class="btn">Show Label Value</button>
<div class="show"></div>
<script>
function showLabel() {
var dropDown = document.querySelector(".drop-down");
var msg = document.querySelector(".show").innerHTML="Label = " +
dropDown.options[dropDown.selectedIndex].label;
console.log(dropDown.options[dropDown.selectedIndex].label);
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Chọn chủ đề yêu thích của bạn từ danh sách thả xuống và sau đó nhấp vào “ Hiển thị giá trị nhãn ”Để hiển thị giá trị nhãn của tùy chọn đó.
