HTML DOM Input Color 物件
阿新 • • 發佈：2020-11-19
Input Color 物件
Input Color 物件是 HTML5 新增的物件。
Input Color 物件代表了使用 type="color"屬性的 HTML <input> 元素 。
注意：Internet Explorer 或 Safari瀏覽器不支援 <input> 元素使用 type="color" 屬性。
訪問 Input Color 物件可以使用 querySelector() 函式來訪問使用 type="color" 屬性的 <input> 元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xinbiancheng.cn</title>
</head>
<body>
<h3>如何訪問拾色器</h3>
選擇你喜歡的顏色: <input type="color" id="myColor">
<p>點選 "點我" 按鈕獲取拾色器的顏色。</p>
<p id="demo"></p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
var x = document.querySelector("#myColor").value;
document.querySelector("#demo").innerHTML = x;
}
</script>
</body>
</html>
Input Color 物件屬性
| 屬性 | 描述 |
|---|---|
| autocomplete | 設定或者返回拾色器的 autocomplete 屬性值。 |
| autofocus | 設定或者返回在頁面載入時拾色器是否獲取焦點。 |
| defaultValue | 設定或返回拾色器預設的值。 |
| disabled | 設定或返回拾色器是否可用。 |
| form | 返回包含拾色器的 form 表單引用。 |
| list | 返回包含拾色器的 datalist 引用。 |
| name | 設定或者返回拾色器 name 屬性值。 |
| type | 返回拾色器的表單元素型別。 |
| value | 設定或者返回拾色器的 value 屬性值。 |
標準屬性和事件
相關文章
HTML 教程:HTML 表單
HTML 參考手冊:HTML <input> 標籤
HTML 參考手冊:HTML <input> type 屬性