HTML DOM 输入颜色对象

htmlweb developmentfront end technology更新于 2025/8/4 5:00:17

HTML DOM 输入颜色对象表示一个颜色类型的 HTML 输入元素。

语法

以下是语法 −

创建颜色类型为 − 的 <input>

var colorObject = document.createElement(“input”);
colorObject.type = “color”;

属性

此处，"colorObject"可以具有以下属性 −

属性	描述
autocomplete	定义颜色选择器 autocomplete 属性的值
autofocus	定义颜色选择器是否应在初始页面加载时聚焦。
defaultValue	设置/返回颜色选择器的默认值
disabled	定义颜色选择器是否禁用/启用
form	返回包含颜色选择器的封闭表单的引用
name	定义颜色的 name 属性的值picker
type	返回颜色选择器表单元素的类型
value	定义颜色选择器 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>