Question

我有一个使用<button>为html选择几种颜色的代码。有没有办法把它变成颜色选择器？我不知道如何从颜色选择器中获取要在javascript函数中使用的值。谁能帮我？这是我现在的代码。

HTML

<span id="colors" > 

        <button  class="black" id="#000000"> </button>
        <button  class="white" id = '#FFFFFF'> </button>
        <button  class="blue" id = '#0000FF'> </button>
        <button  class="red" id = '#FF0000'> </button>
        <button  class="yellow" id = '#FFFF00'> </button>
        <button  class="green" id = '#008000'> </button>
        <button  class="purple" id = '#800080'> </button>

        <input type="hidden" id="color_value_form"> 

</span>

这是javascript文件中的函数。

$('#colors button').on('click', function(){
        tmp_ctx.strokeStyle = $(this).attr('id');
        tmp_ctx.fillStyle = tmp_ctx.strokeStyle;
        console.log(tmp_ctx.strokeStyle);

        drawBrush();
    })

Answer 1

不确定您到底想要完成的是什么，但这里有一些让您失望的事情。

$('#colors button').on('click', function(){
	document.body.style.background = $(this).data('color');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors"> 
	<button class="black" data-color="#000000">black</button>
	<button class="white" data-color='#FFFFFF'>white </button>
	<button class="blue" data-color='#0000FF'>blue</button>
	<button class="red" data-color='#FF0000'>red</button>
	<button class="yellow" data-color='#FFFF00'>yellow </button>
	<button class="green" data-color='#008000'> green</button>
	<button class="purple" data-color='#800080'>purple </button>
</div>

Answer 2

html5也有colorpicker

 <input id="html5colorpicker" type="color">

在js：

$("#html5colorpicker").value //is a string like "#000000"

建议为某个功能制作颜色选择器代码

2 个答案: