使用RGB输入框通过JS应用颜色

Posted 2023-05-07

【中文标题】使用RGB输入框通过JS应用颜色

【英文标题】：Using RGB input boxes to apply color through JS

【发布时间】：2016-06-05 06:11:48

【问题描述】：

希望有人可以在这里帮助我，我正在编写一些代码来使用代表 RGB 的 3 个输入框将不同的颜色应用于文本区域，但我似乎无法获得要应用的值。这是我正在使用的代码。

function rgb(r, g, b) 
    return "rgb("+r+","+g+","+b+")";
 
document.getElementById("id1").style.backgroundColor = rgb;

<table>
    <tbody>
        <tr>
            <td colspan="5">
                <textarea id="id1" cols="50" rows="10"></textarea>
                <!-- RGB value boxes !-->
            </td>
            <td>
                R
                <input type=text size=3 maxlength=3 name="r" value="0" onBlur="rgb(this.value);">
            </td>
            <td>
                G
                <input type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb(this.value);">
            </td>
            <td>    
                B
                <input type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb(this.value);">
            </td>

任何帮助将不胜感激。

【问题讨论】：

您需要实际调用rgb() 函数并为其提供一些值。目前，您只是为 backgroundColour 属性提供对函数的引用，这充其量什么也不做，最坏的情况是抛出错误。

【参考方案1】：

我认为这基本上是你试图做的：

function rgb() 
  document.getElementById("id1").style.backgroundColor =
  "rgb("+document.getElementById("red").value+","
  +document.getElementById("green").value+","
  +document.getElementById("blue").value+")";

<table>
    <tbody>
        <tr>
            <td colspan="5">
                <textarea id="id1" cols="50" rows="10"></textarea>
                <!-- RGB value boxes !-->
            </td>
            <td>
                R
                <input id="red" type=text size=3 maxlength=3 name="r" value="0" onBlur="rgb()">
            </td>
            <td>
                G
                <input id="green" type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb()">
            </td>
            <td>    
                B
                <input id="blue" type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb()">
          </td>
      </tr>
  </tbody>
</table>

这是工作的 JSFiddle： https://jsfiddle.net/n74dxarn/

它不适合您的原因是因为您在 javascript 代码末尾调用了没有任何参数的 rgb 函数，而当 onBlur 被激活时，您调用的函数只有一个参数。

希望对你有帮助

【参考方案2】：

你正在做rgb(this.value)，它只给出了函数 1 的值。从函数中删除参数，并即时获取其中的 rgb 值。

【参考方案3】：

试试这个：

var r=0;
var g=0;
var b=0;
function rgb(elem) 
  var name = elem.name;
  var val = elem.value;
  window[name] = val;
  document.getElementById("id1").style.backgroundColor = 'rgb('+r+','+g+','+b+')';

<table>
    <tbody>
        <tr>
            <td colspan="5">
                <textarea id="id1" cols="50" rows="10"></textarea>
                <!-- RGB value boxes !-->
            </td>
            <td>
                R
                <input type=text size=3 maxlength=3 name="r" value="0" onBlur="rgb(this);">
            </td>
            <td>
                G
                <input type=text size=3 maxlength=3 name="g" value="0" onBlur="rgb(this);">
            </td>
            <td>    
                B
                <input type=text size=3 maxlength=3 name="b" value="0" onBlur="rgb(this);">
            </td>

【讨论】：

感谢您抽出宝贵时间帮助我 :)