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

Thuộc tính văn bản tùy chọn HTML DOM

Thuộc tính văn bản tùy chọn HTML DOM trả về và sửa đổi văn bản của một tùy chọn trong tài liệu HTML.

Cú pháp

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

1. Trả lại văn bản

object.text

2. Sửa đổi văn bản

object.text = “text”

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính văn bản tùy chọn HTML DOM -

<!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>

Đầu ra

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

Thuộc tính văn bản tùy chọn HTML DOM

Nhấp vào “ Thay đổi tên môn vật lý ”Để thay đổi văn bản của tùy chọn vật lý.

Thuộc tính văn bản tùy chọn HTML DOM