如何在点击时将html颜色输入值设置为div颜色答案

【问题标题】：how to set html color input values to div colors on click如何在点击时将html颜色输入值设置为div颜色
【发布时间】：2016-01-24 20:42:26
【问题描述】：

如果 div 被点击，html5 颜色输入值应该设置为点击的 div 颜色和背景颜色值。

我试过代码

$(function() {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val($(this).css("color"));
    $('#designer-javascript-backcolor').val($(this).css("background-color"));

  });

});

Selected item color:
<input type="color" id="designer-javascript-color" />
<br>Selected item background color:
<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

  click here</div>

点击后点击我，两个输入仍然是黑色。如何解决这个问题，让白色和蓝色出现在输入中？

测试用例位于http://jsfiddle.net/bpc2w43w/

【问题讨论】：

如果我没听错的话，你应该在输入框上做集合，而你应该做gets。
是的。我想将颜色输入元素值设置为从 div 样式单击的 div 颜色值。也许 css 中的颜色值应该转换为 #rrggbb 或其他格式以进行正确设置。
jQuery css 总是返回 rgb 值。有关如何将 rgb 转换为十六进制的示例，请参见该答案，该格式适用于颜色类型的输入：stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

标签： javascript jquery css html colors

【解决方案1】：

在使用之前将 rgb 值转换为十六进制：

function rgbToHex(rgb) {
  var a = rgb.split("(")[1].split(")")[0].split(",");
  return "#" + a.map(function(x) {
    x = parseInt(x).toString(16);
    return (x.length == 1) ? "0"+x : x;
  }).join("");
}


$(function () {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val(rgbToHex($(this).css("color")));
    $('#designer-javascript-backcolor').val(rgbToHex($(this).css("background-color")));
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

Selected item color: <input type="color" id="designer-javascript-color" />
<br>
Selected item background color:<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

    click here</div>

【讨论】：

【解决方案2】：

$(this).css('color') 和 $(this).css('background-color') 返回的值是一个 RGB 值。因此，您需要将其转换为十六进制值。借someone's solution 转换值，这里有一个解决你问题的方法。

$(function() {
        $('#changeMe').on('click', function() {
             $('#designer-javascript-color').val(rgb2hex($(this).css('color')));
             $('#designer-javascript-backcolor').val(rgb2hex($(this).css('background-color')));
        });
});

var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
   return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

【讨论】：

【解决方案3】：

这行得通

           Selected item color: <input type="color" id="designer-javascript-color" >
    <br>
    Selected item background color:<input type="color" id="designer-javascript-backcolor">


<br/>

<button id="changeMe" style='color:white;background-color: blue'>

click here</button>

此外，当您在选择器中选择颜色时，请记住移动颜色选择器右侧的滑块，以便选择较浅的颜色。

$("#changeMe").click(function() {
 var a = $("#designer-javascript-color").val();
 var b= $("#designer-javascript-backcolor").val();

  $("#changeMe").css({
  'color' : a,
  'background-color': b
  });
});

【讨论】：