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

Đối tượng màu đầu vào HTML DOM

Đối tượng màu đầu vào HTML DOM đại diện cho phần tử HTML đầu vào có màu loại.

Cú pháp

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

  • Tạo với màu loại -
var colorObject = document.createElement(“input”);
colorObject.type = “color”;

Các thuộc tính

Đây, “ colorObject ”Có thể có các thuộc tính sau -

Thuộc tính Mô tả
tự động hoàn thành Nó xác định giá trị của thuộc tính tự động hoàn thành của một bộ chọn màu
tự động lấy nét Nó xác định xem có nên tập trung vào bộ chọn màu khi tải trang đầu tiên hay không.
defaultValue Nó đặt / trả về giá trị mặc định của bộ chọn màu
bị vô hiệu hóa Nó xác định nếu bộ chọn màu bị tắt / bật
biểu mẫu Nó trả về một tham chiếu của biểu mẫu bao có chứa bộ chọn màu
tên Nó xác định giá trị của thuộc tính name của một bộ chọn màu
loại Nó trả về kiểu phần tử biểu mẫu của bộ chọn màu
giá trị Nó xác định giá trị của thuộc tính value của bộ chọn màu

Ví dụ

Hãy để chúng tôi xem ví dụ về Tên màu đầu vào tài sản -

<!DOCTYPE html>
<html>
<head>
<title>Input Color Name</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor">
</form>
<button onclick="changeNameValue()">Change name value</button>
<div id="divDisplay"></div>
<script>
   var inputColor = document.getElementById("Color");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Name of color input: '+inputColor.name;
   function changeNameValue() {
      if(inputColor.name == 'primaryColor'){
         inputColor.name = 'secondaryColor';
         divDisplay.textContent = 'Name of color input: '+inputColor.name;
      }
   }
</script>
</body>
</html>

Đầu ra

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

Trước khi nhấp vào ‘Thay đổi giá trị tên’ nút -

Đối tượng màu đầu vào HTML DOM

Sau khi nhấp vào ‘ Thay đổi giá trị tên’ nút -

Đối tượng màu đầu vào HTML DOM