根据表单内容即时更新css属性的方法？

Question

我在网站上有一个表格，其中一个输入用于输入要输入到数据库中的十六进制颜色代码。

页面是否有任何动态更新自身的方式，以便如果用户将值从“000000”更改为“ffffff”，则输入框的“color”CSS属性将立即更改，无需重新加载页面？

Answer 1

不是没有Javascript。

使用JavaScript，但是......

<input type='text' name='color' id='color'> 

然后：

var color = document.getElementById('color'); 
color.onchange = function() { 
    color.style.color = '#' + this.value; 
} 

如果你要去JavaScript的路线，不过，你可能也全力以赴，并给他们一个颜色选择器。 There are plenty of good ones。

Answer 2

CSS属性在HTML DOM中有相应的条目，可以通过Javascript进行修改。

This list已经有点过时了，但它给了你一些常见的CSS片断及其相应的DOM属性名称。

诚然，一个JS LIB喜欢像jQuery使这更容易...

Answer 3

您可以使用JavaScript来实现这一目标。

举个例子：

你的HTML：

<input type="text" id="test" /> 

您的JS：

var test = document.getElementById('test'); 
test.onchange = function(){ 
    test.style.color = this.value; 
}; 

但这并不检查用户的输入（所以你必须把它扩大） 。