html中input的color,HTML DOM Input Color用法及代码示例

HTML DOM中的Input Color Object属性用于创建和访问对象中的元素。 用于在输入字段中输入数据。允许用户输入数据的输入控件的声明可以通过

中使用的元素来完成。

用法:

它用于访问元素。var x = document.getElementById("myColor");

它用于创建元素。var x = document.createElement("INPUT");

属性值：

autocomplete:它用于设置或返回颜色选择器的自动完成属性。

autofocus:当页面自动获得焦点时，它用于设置或返回颜色选择器。

defaultValue:它用于设置或返回颜色选择器的默认值。

disabled:它用于设置或返回是否禁用颜色选择器。

form:它返回包含颜色选择器的表单的引用。

list:它返回包含颜色选择器的元素的引用。

name:它用于设置或返回颜色选择器的名称属性。

type:它返回颜色选择器的表单元素的类型。

value:它用于设置或返回颜色选择器的value属性。

范例1：此示例描述了getElementById()方法来访问类型= “color”属性的元素。

HTML DOM Input Color Object Property

HTML DOM Input Color Object Property

Select your favorite color:

id = "color">

Click on the button to get the color value

Click Here!

function myGeeks() {

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

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

}

输出：

之前单击按钮：

单击按钮后：

范例2：此示例描述了document.createElement()方法，用于创建具有type = “color”属性的元素。

HTML DOM Input Color Object Property

HTML DOM Input Color Object Property

Click Here!

function myGeeks() {

/* Create input element */

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

/* Set color attribute */

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

/* Set clor value */

x.setAttribute("value", "#009900");

document.body.appendChild(x);

}

输出：

之前单击按钮：

单击按钮后：

支持的浏览器：下面列出了DOM Input Color Object属性支持的浏览器：

谷歌浏览器

IE浏览器

Firefox

Safari

Opera

注意：Internet Explorer 11.0和更早版本或Safari 9.1和更早版本不支持此功能。