javascript - 在 rgba 中实时编辑 RGB 值

Question

我正在构建一个站点，希望用户能够在其中更改其中一个 div 的颜色。颜色是用 rgba 设置的，因为我希望它是透明的。

我遇到的问题是，我找到了一个颜色选择器，但我更改了 RGB 而没有搞砸不透明度。到目前为止，我是这样的:

<input class="color" type="text" onchange="document.getElementById('main-info').style.backgroundColor = '#' + this.color;">

很明显，我将实时版本的 rgba 替换为十六进制，这消除了不透明度。我尝试过的其他事情是:

<input class="color" type="text" onchange=" document.getElementById('id_info_box_bg_color').value = (Math.floor(this.color.rgb[0]*255)) + ', ' + (Math.floor(this.color.rgb[1]*255)) + ', ' + (Math.floor(this.color.rgb[2]*255));">

它成功获取了 rgba 值，但我无法将其正确插入到 rgba 中。

有谁知道我如何更换部分 rgba 吗？所以我只是改变 rgba(X, X, X, .5) 中的 X

Answer 1

我不知道你是否可以只替换部分 rgba 值，但是如果 div 的颜色在 css 中设置为 rgba，你可以通过请求 css 属性来检索 rgba 字符串值:

$('#myDiv').css('background-color');

这将返回一个看起来像这样的字符串(例如):“rgba(255, 0, 0, 0.496094)” 或者，如果不透明度设置为 1，则为“rgb(255, 0, 0)” 来自这样您就可以解析出 alpha channel 值并在设置新的 rgba 值时使用它。我确信有人比我更聪明，可以找到一种从字符串中提取该值的有效方法(或者至少不像我那么懒惰。)当你想为 div 设置新颜色时:

$('#myDiv').css('background-color', 'newColor');

其中 new color 是您构造的字符串，其形式与您在 css 中设置它时的形式相同，或者如上所示随后检索它时使用从原始字符串中提取的相同 alpha 值。