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 StudiesHTML DOM 輸入顏色物件
HTML DOM Input Color 物件表示輸入 HTML 元素，型別為顏色。
語法
以下為語法 −
- 使用顏色型別建立一個 <input> −
var colorObject = document.createElement(“input”); colorObject.type = “color”;
屬性
此處，“colorObject”可以具有以下屬性 −
| 屬性 | 描述 |
|---|---|
| autocomplete | 它定義顏色選擇器 autocomplete 屬性的值 |
| autofocus | 它定義在初始頁面載入時是否應獲得顏色的焦點。 |
| defaultValue | 它設定/返回顏色選擇器的預設值 |
| disabled | 它定義顏色選擇器是否已停用/啟用 |
| form | 它返回包含顏色選擇器的封閉表單的引用 |
| name | 它定義顏色選擇器的名稱屬性的值 |
| type | 它返回顏色選擇器的表單元素型別 |
| value | 它定義顏色選擇器的值屬性的值 |
示例
我們來看一個 輸入顏色名稱 屬性的示例 −
<!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>輸出
這將產生以下輸出 −
單擊 ‘更改名稱值’ 按鈕之前 −
單擊 ‘更改名稱值’ 按鈕後 −
更新於： 30-Jul-2019
114 次瀏覽
廣告