HTML DOM Input Color 对象
Input Color 对象
Input Color 对象是 HTML5 新增的对象。
Input Color 对象代表了使用 type="color"属性的 HTML 元素 。
注意: Internet Explorer 或 Safari浏览器不支持 元素使用 type="color" 属性。
访问 Input Color 对象
可以使用 querySelector() 函数来访问使用 type="color" 属性的 元素:
xinbiancheng.cn如何访问拾色器
选择你喜欢的颜色:
点击 "点我" 按钮获取拾色器的颜色。
点我
function myFunction() {
var x = document.querySelector("#myColor").value;
document.querySelector("#demo").innerHTML = x;
}
提示: 你同样可以通过表单的元素集合来访问 Input Color 对象。
创建 Input Color 对象
可以使用 document.createElement() 方法来创建使用 type="color" 属性的 元素:
xinbiancheng.cn点击按钮创建一个拾色器。
点我
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "color");
let p = document.querySelector('#myp');
p.appendChild(x)
}
Input Color 对象属性
属性
描述
autocomplete
设置或者返回拾色器的 autocomplete 属性值。
设置或者返回在页面加载时拾色器是否获取焦点。
defaultValue
设置或返回拾色器默认的值。
设置或返回拾色器是否可用。
返回包含拾色器的 form 表单引用。
list
返回包含拾色器的 datalist 引用。
设置或者返回拾色器 name 属性值。
返回拾色器的表单元素类型。
设置或者返回拾色器的 value 属性值。
标准属性和事件
Input Color 对象同样支持标准 属性 和 事件。
相关文章
HTML 教程: HTML 表单