Đối tượng Input Color trong HTML DOM đại diện cho một phần tử HTML <input> với kiểu color.
Cú pháp
Cú pháp như sau:
- Tạo một <input> với kiểu color:
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ả |
|---|---|
| autocomplete | Định nghĩa giá trị thuộc tính autocomplete của bộ chọn màu. |
| autofocus | Định nghĩa xem bộ chọn màu có được focus khi tải trang ban đầu hay không. |
| defaultValue | Thiết lập/trả về giá trị mặc định của bộ chọn màu. |
| disabled | Định nghĩa xem bộ chọn màu bị vô hiệu hóa/kích hoạt. |
| form | Trả về tham chiếu của form bao quanh chứa bộ chọn màu. |
| name | Định nghĩa giá trị thuộc tính name của một bộ chọn màu. |
| type | Trả về kiểu phần tử form của bộ chọn màu. |
| value | Định nghĩa giá trị thuộc tính value của một bộ chọn màu. |
Ví dụ
Dưới đây là ví dụ về thuộc tính Input Color name:
<!DOCTYPE html> <html> <head> <title>Input Color Name</title> </head> <body> <form id="formForColorsInput"> Bộ chọn màu: <input type="color" id="Color" name="primaryColor"> </form> <button onclick="changeNameValue()">Thay đổi giá trị name</button> <div id="divDisplay"></div> <script> var inputColor = document.getElementById("Color"); var divDisplay = document.getElementById("divDisplay"); divDisplay.textContent = 'Tên input màu: '+inputColor.name; function changeNameValue() { if(inputColor.name == 'primaryColor'){ inputColor.name = 'secondaryColor'; divDisplay.textContent = 'Tên input màu: '+inputColor.name; } } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Trước khi nhấn nút 『Thay đổi giá trị name』:
Sau khi nhấn nút 『Thay đổi giá trị name』:
