您的位置:首页 - HTML5
HTML5中input元素的新属性color
请使用支持HTML5的浏览器查看本页。

实际应用:http://keleyi.com/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.com/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)" />

效果如下:
本站导航
相关文章
柯乐义 Copyright© keleyi.com