Javascript onChange影响CSS样式

时间:2011-10-31 15:53:05

标签: javascript css

我正在尝试创建一个“实时”视图,我们的客户可以在其中编辑将嵌入到自己页面中的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>

这对某人来说可能很简单,但过了几天,我找不到合适的方法。

更新:

在看到答案的方向后,我想我最好添加以下内容..

如果id名称不相关,这将如何工作?

示例:

id="maincolor" -> affected id="hello"
id="fontcolor" -> affected id="world"
id="buttoncolor" -> affected id="foo"

这就是为什么我认为为每个元素内联javascript可能更好?

只有四种颜色可供更改,另外还有一个隐藏包含文字的各种div的选项和一个隐藏标题的复选框..

系统位于:https://www.overseasmortgagefinder.co.uk/affiliates/generator.php

从左侧可以看出,我们的用户可以自定义“采购系统”在其网站上的外观。

我要做的是在右侧创建一个“实时视图”窗口,而不是静态帮助指南。

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

3 个答案:

答案 0 :(得分:1)

这是一个使用jquery的相当动态的方法。

将输入内容的格式分别更改为color-box1color-box2color-box3

<script type="text/javascript">
$(function() {
  // assigns a onChange event to all inputs with ids that start with "color-box"
  $("input[id^=color-box]").change(function () {    
    // validate user's input here    
    // if valid, grab id of changed input & remove the "color-" part    
    var id = $(this).attr("id").split("-", 2)[1];
    // set color of div using the id above   
    $("div#"+id).css("background-color","#"+$(this).val());
  }); 
});
</script>

如果您需要一个纯粹的JavaScript解决方案,请大声说..

答案 1 :(得分:0)

这个怎么样:

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

此外,您还有两个</form>结束标记。我摆脱了第一个。

答案 2 :(得分:0)

不使用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;
    }
}

这是要测试的fiddle