DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5特效代碼 >> HTML5中input元素的新屬性color
HTML5中input元素的新屬性color
編輯:HTML5特效代碼     
請使用支持HTML5的浏覽器查看本頁。

實際應用:http:///tool/color.htm

HTML5的input元素的type屬性增加了不少可能值,color就是一個,下面是一個例子。

代碼如下:

<input type="color"value="#008000" id="keleyicolor">


效果如下,請點擊:


使用jQuery獲取所選的顏色值:
<input type="text" id="keleyivalue" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script>
$("#k"+"eleyivalue").val($("#kele"+"yicolor").val());
$("#kele"+"yicolor").on("change",function(){
$("#k"+"eleyivalue").val($(this).val());
})
</script>
選擇完顏色值後,下面就會改變。


使用js獲取選擇的值:

<input type="button" value="點擊這裡顯示選擇的顏色值" onclick="alert(document.getElementById('kel'+'eyicolor').value)" />

效果如下:
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved