Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 text Property
The HTML DOM option text property returns and modify the text of an option in the HTML document.
Syntax
Following is the syntax −
1. Returning text
object.text
2. Modifying text
object.text = “text”
Example
Let us see an example of HTML DOM option text property −
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
.drop-down{
display:block;
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:2px;
margin:1rem auto;
outline:none;
}
.btn{
background:orange;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
font-weight:bold;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Option text Property Demo</h1>
<p>Hi, Select your favourite subject −</p>
<select class='drop-down'>
<option>Physics</option>
<option>Biology<option>
<option>Maths<option>
</select>
<button type="button" onclick="changePhysicsName()" class="btn">Change Physics
Subject Name</button>
<div class="show"></div>
<script>
function changePhysicsName() {
document.querySelector(".drop-down").options[0].text="Applied Physics";
document.querySelector(".show").innerHTML="Now Physics become Applied Physics";
}
</script>
</body>
</html>Output
This will produce the following output −
Click on “Change Physics Subject Name” button to change the text of physics option.
Updated on: 30-Jul-2019
99 Views
Advertisements