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

Thuộc tính giá trị nút nhập HTML DOM

Thuộc tính giá trị DOM HTML trả về và sửa đổi nội dung của thuộc tính giá trị của nút nhập.

Cú pháp

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

1. Giá trị trả về

object.value

2. Sửa đổi giá trị

object.value=”text”

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính giá trị

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value Property</title>
<style>
   body{
      text-align:center
   }
   .btn{
      display:block;
      margin:1rem auto;
      background-color:#db133a;
      color:#fff;
      border:1px solid #db133a;
      padding:0.5rem;
      border-radius:50px;
      width:80%;
   }
   .show-value{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
</style>
</head>
<body>
<h1>value Property Example</h1>
<input type="submit" onclick="setValue()" class="btn" value="Click me to change my
text">
<div class="show-value"></div>
<script>
   function setValue() {
      var btn= document.querySelector(".btn");
      document.querySelector(".show-value").innerHTML ="Previous Value = " + btn.value;
      document.querySelector(".btn").value = "Congrats! you have successfully changed my value";
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính giá trị nút nhập HTML DOM

Nhấp vào “ Nhấp vào tôi để thay đổi văn bản của tôi ”Để thay đổi giá trị nút màu đỏ.

Thuộc tính giá trị nút nhập HTML DOM