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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。