如何使用jquery方法設定和獲取顏色選擇器的值

2019-12-11 16:40:07

在HTML5中，input新加了幾種型別，有email、phone、date、datetime和color。使用jquery方法設定顏色選擇器的值，並獲取顏色選擇器的值。下面利用一個範例說明這個功能，操作如下：

第一步，在HBuilder指定目錄新建靜態頁面，利用HTML5預設模板，並引入jquery核心檔案，如下圖所示：

第二步，在<body></body>標籤插入兩個按鈕button，分別設定id屬性，如下圖所示：

第三步，在<script></script>標籤元素內，插入兩個按鈕點選事件，如下圖所示：

第四步，分別設定顏色選擇器的值，然後在第二個按鈕點選事件中獲取顏色選擇器的值，如下圖所示：

第五步，儲存程式碼並在瀏覽器中檢視效果，點選插入資料按鈕，顏色選擇器預設黑色變為紅色，如下圖所示：

第六步，調整部分程式碼，再次操作獲取資料按鈕，開啟瀏覽器控制台，檢視列印結果，如下圖所示：