HTML DOM Input Color对象(Input Color Object)

Input Color对象代表了HTML文档中的type="color"的input元素

【5】Input Color对象是HTML5中新增加对象。

注:IE和Safari浏览器不支持type="color"类型的input元素

如何访问Input color对象?

使用getElementById()方法访问type="color"的input元素。

注:使用form元素的elements收集器也能够访问type="color"的input元素。

var  x = document.getElementById("myColor");

如何创建Input color对象

使用createElement()方法创建type="color"的input元素。

var x = document.createElement("input");
x.setAttribute("type", "color");
Input Color对象的属性
属性 说明
autocomplete 设置或返回颜色选择器autocomplete属性的值
autofocus【5】 设置或返回页面下载完毕后,是否自动聚焦到type="color"的input元素上
defaultValue 设置或返回type="color"的input元素的默认值
disabled 设置或返回type="color"的input元素是否被禁用
form 返回包含type="color"的input元素的form引用
list 返回包含type="color"的input元素的datalist的引用
name 设置或返回type="color"的input元素的name属性值
type 设置或返回form元素中的type="color"元素是什么类型
value 设置或返回type="color"的input元素的value属性值

标准属性及事件

Input color对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问type="color"的input元素</h3>

选择你喜欢的颜色: <input type="color" id="myColor">

<p>点击以下按钮,获取颜色的值</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myColor").value;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建type="color"的input元素</h3>

<p>点击以下按钮,创建type="color"的input元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.createElement("INPUT");

x.setAttribute("type", "color");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容