HTML DOM Input Color用法及代码示例

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

用法:

它用于访问<iframe>元素。

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

它用于创建<iframe>元素。

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

属性值：

autocomplete:它用于设置或返回颜色选择器的自动完成属性。
autofocus:当页面自动获得焦点时，它用于设置或返回颜色选择器。
defaultValue:它用于设置或返回颜色选择器的默认值。
disabled:它用于设置或返回是否禁用颜色选择器。
form:它返回包含颜色选择器的表单的引用。
list:它返回包含颜色选择器的元素的引用。
name:它用于设置或返回颜色选择器的名称属性。
type:它返回颜色选择器的表单元素的类型。
value:它用于设置或返回颜色选择器的value属性。

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>  
        HTML DOM Input Color Object Property  
    </title> 
</head> 
  
<body> 
      
    <h2> 
        HTML DOM Input Color Object Property  
    </h2> 
      
    <p> 
        Select your favorite color:  
        <input type = "color" value = "#009900"
            id = "color"> 
    </p> 
  
    <p>Click on the button to get the color value</p> 
  
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <p id = "GFG"></p> 
      
    <!-- script to return the input color -->
    <script> 
        function myGeeks() { 
            var x = document.getElementById("color").value; 
            document.getElementById("GFG").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html>

输出：
之前单击按钮：
color object
单击按钮后：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>  
        HTML DOM Input Color Object Property  
    </title> 
</head> 
  
<body> 
      
    <h2> 
        HTML DOM Input Color Object Property  
    </h2> 
  
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <!-- script to create input color element -->
    <script> 
        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); 
        } 
    </script> 
</body> 
  
</html>

输出：
之前单击按钮：
color object
单击按钮后：

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

谷歌浏览器
IE浏览器
Firefox
Safari
Opera

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

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 HTML | DOM Input Color Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。