Javascript 如何在单击时将html颜色输入值设置为div colors

如果单击了div，则html5颜色输入值应设置为单击的div颜色和背景颜色值

我试过密码

$function{ $changeMe。单击，函数{ $'designer-javascript-color'.val$this.csscolor； $'designer-javascript-backcolor'.val$this.cssbackground-color； }; }; 所选项目颜色： 所选项目背景色： 单击此处从$this.css'color'和$this.css'background-color'返回的值是RGB值。因此，需要将其转换为十六进制值。为了转换值，这里有一个解决问题的方法

$(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];
}

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

$(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];
}

这很有效

           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>

这很有效

           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>

---

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

函数rgbToHexrgb{ var a=rgb.split[1]。split[0]。split，； return+a.mapfunctionx{ x=parseIntx.toString 16； 返回x.length==1？0+x:x； }.加入； } $function{ $changeMe。单击，函数{ $'designer-javascript-color'.valrgbToHex$this.csscolor； $'designer-javascript-backcolor'.valrgbToHex$this.cssbackground-color； }; }; 所选项目颜色： 所选项目背景色：

---

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

函数rgbToHexrgb{ var a=rgb.split[1]。split[0]。split，； return+a.mapfunctionx{ x=parseIntx.toString 16； 返回x.length==1？0+x:x； }.加入； } $function{ $changeMe。单击，函数{ $'designer-javascript-color'.valrgbToHex$this.csscolor； $'designer-javascript-backcolor'.valrgbToHex$this.cssbackground-color； }; }; 所选项目颜色： 所选项目背景色：

---

单击此处如果我理解正确，您正在输入框上执行设置，而您应该执行gets。是。我想将颜色输入元素值设置为div样式中单击的div颜色值。可能css中的颜色值应该转换为rrggbb或其他格式以进行正确设置。jQuery css始终返回rgb值。关于如何将rgb转换为十六进制的示例，请参见该答案。十六进制是一种与颜色类型的输入一起工作的格式：如果我没听错，您应该在输入框上设置gets。是的。我想将颜色输入元素值设置为div样式中单击的div颜色值。可能css中的颜色值应该转换为rrggbb或其他格式以进行正确设置。jQuery css始终返回rgb值。有关如何将rgb转换为十六进制的示例，请参见该答案，十六进制是一种可用于输入颜色类型的格式：