

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Option label Property
The DOM option label property returns and alter the value of the label attribute of an option in an HTML document.
Syntax
Following is the syntax −
Returning label
object.label
2. Modifying label
object.label = “text”
Example
Let us see an example of option label property −
<!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>
Output
This will produce the following output −
Select your favourite subject from the drop-down list and then click on “Show Label Value” button to display the value of label of that option.
- Related Questions & Answers
- HTML DOM Option text Property
- HTML DOM Option disabled Property
- HTML DOM Option index Property
- HTML DOM Option defaultSelected Property
- HTML DOM Option value Property
- HTML DOM Label htmlFor Property
- HTML DOM Track label Property
- HTML DOM Option Object
- HTML DOM Label Object
- HTML DOM inputEncoding Property
- HTML DOM isContentEditable Property
- HTML DOM lang Property
- HTML DOM lastChild Property
- HTML DOM lastElementChild Property
- HTML DOM lastModified Property
Advertisements