影响CSS样式的Javascript onChange

我正在尝试创建一个“实时”视图，我们的客户可以在其中编辑他们将嵌入到自己页面中的php页面的颜色

通过在每个文本字段中输入十六进制值，它应该立即更改为其相对div设置的背景色值

<!--Enter a hex color to change the background of id="box1" -->
<input name="color1" id="color1" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box1' to this value);"  />
<br />

<!--Enter a hex color to change the background of id="box2" -->
<input name="color2" id="color2" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box2' to this value);"  />
<br />

<!--Enter a hex color to change the background of id="box2" -->
<input name="color3" id="color3" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box3' to this value);"  />

<hr />

<div id="box1" style="background-color:#ff0000">HELLO 1</div>
<div id="box2" style="background-color:#00ff00">HELLO 2</div>
<div id="box3" style="background-color:#0000ff">HELLO 3</div>

这就是为什么我认为最好为每个元素内联javascript

只有四种颜色可以更改，另外还有一个选项可以隐藏包含文本的各种div，还有一个复选框可以隐藏标题

系统如下：

从左侧可以看到，我们的用户可以定制“采购系统”在其网站上的外观

我想做的是在右边创建一个“实时视图”窗口，而不是静态帮助指南

这对我的目标更清楚了吗？

这个怎么样：

onchange="document.getElementById('box' + this.id.charAt(this.id.length - 1 )).style.backgroundColor = this.value;"

此外，您还有两个

结束标记。我会去掉第一个。

这个怎么样：

onchange="document.getElementById('box' + this.id.charAt(this.id.length - 1 )).style.backgroundColor = this.value;"

---

此外，您还有两个

结束标记。我要去掉第一个。

这里有一个使用jquery的相当动态的方法

将输入的id格式分别更改为

color-box1

、

color-box2

和

color-box3

$（函数（）{
//将onChange事件分配给ID以“颜色框”开头的所有输入
$（“输入[id^=color box]”）。更改（函数（）{
//在此处验证用户的输入
//如果有效，获取更改输入的id并删除“颜色-”部分
var id=$（this.attr（“id”）.split（“-”，2）[1]；
//使用上面的id设置div的颜色
$（“div#“+id）.css（“背景色”，“此”.val（））；
}); 
});

---

如果您需要纯javascript解决方案，只需大喊..

好的，这里有一个使用jquery的相当动态的方法

将输入的id格式分别更改为

color-box1

、

color-box2

和

color-box3

$（函数（）{
//将onChange事件分配给ID以“颜色框”开头的所有输入
$（“输入[id^=color box]”）。更改（函数（）{
//在此处验证用户的输入
//如果有效，获取更改输入的id并删除“颜色-”部分
var id=$（this.attr（“id”）.split（“-”，2）[1]；
//使用上面的id设置div的颜色
$（“div#“+id）.css（“背景色”，“此”.val（））；
}); 
});

---

如果您需要纯javascript解决方案，只需大喊..

解决方案而不使用jquery：

• 从输入中删除

  onchange

  ，因为在用户离开（模糊）字段之前，

  onchange

  不会被激发
• 为每个输入字段添加

  onkeyup=“changeBackground（this）”

将此javascript函数添加到页面：

changeBackground = function(source) {
    if (/^[a-f0-9]{3}|[a-f0-9]{6}$/.test(source.value)) { // test for a valid hex color
        var boxId = source.id.replace('color', 'box');
        document.getElementById(boxId).style.backgroundColor = '#'+source.value;
    }
}

---

以下是要测试的内容。

不使用jquery的解决方案：

• 从输入中删除

  onchange

  ，因为在用户离开（模糊）字段之前，

  onchange

  不会被激发
• 为每个输入字段添加

  onkeyup=“changeBackground（this）”

将此javascript函数添加到页面：

changeBackground = function(source) {
    if (/^[a-f0-9]{3}|[a-f0-9]{6}$/.test(source.value)) { // test for a valid hex color
        var boxId = source.id.replace('color', 'box');
        document.getElementById(boxId).style.backgroundColor = '#'+source.value;
    }
}

---

这是要测试的。

我想这就是我需要的。明天我将研究如何将其应用到实时系统中。谢谢。这更接近我要找的。谢谢，我从中学到了一些东西。有没有想过使用像jQuery这样的JavaScript库？一旦你学会了，它将是一个非常有用的工具。是的，我想我应该开始学习。这几天它似乎很流行，可能会解决我的很多Javascript问题。我想这就是我需要的。明天我将研究如何将其应用到实时系统中。谢谢。这更接近我要找的。谢谢，我从中学到了一些东西。有没有想过使用像jQuery这样的JavaScript库？一旦你学会了，它将是一个非常有用的工具。是的，我想我应该开始学习。这几天它似乎很流行，可能会解决我的很多Javascript问题。我想这就是我需要的。明天我将研究如何将其应用到实时系统中。谢谢。示例：id=“maincolor”->受影响的id=“hello”id=“fontcolor”->受影响的id=“world”id=“buttoncolor”->受影响的id=“foo”这就是为什么我认为最好为每个元素内联javascript？只有四种颜色可以更改，另外还有一个选项可以隐藏包含文本的各种div，还有一个复选框可以隐藏标题。系统在这里：从左侧可以看到，我们的用户可以自定义“采购系统”在其网站上的外观。我想做的是在右边创建一个“实时视图”窗口，而不是静态帮助指南。这对我的目标更清楚了吗？我明白。我不建议您内联任何javascript代码，它会使您的代码无法维护。如果您真的需要使用不相关的id名称（我不建议这样做），您可以使用一个对象来映射从->到关系。如您的示例所示：

varidmap={maincolor:“hello”，fontcolor:“world”，buttoncolor:“foo”}

然后在javascript中使用

var-boxId=IDMAP[source.id]。请告诉我，这是否与我解释的方式相混淆。如果你在这里看到：“主颜色”是蓝色的（标题栏、细边框等）。“FontColor”是标题栏中的白色文本。“buttoncolour”和“ButtonCovercolor”就是它们。因此，在主色的情况下，左侧的选择会影响多个对象。在我看来，我应该使用Javascript来影响“类”，但Javascript似乎不做类，对吧？我想这就是我需要的。明天我将研究如何将其应用到实时系统中。谢谢。示例：id=“maincolor”->受影响的id=“hello”id=“fontcolor”->受影响的id=“world”id=“buttoncolor”->受影响的id=“foo”这就是为什么我认为最好为每个元素内联javascript？只有四种颜色可以更改，另外还有一个选项可以隐藏包含文本的各种div，还有一个复选框可以隐藏标题。系统就在这里：尽你所能