根据用户的文本输入设置背景颜色

我正在尝试制作一个文本框，用户可以在其中键入蓝色，石灰或黑色等颜色关键词之一，然后单击“提交”，页面背景颜色将会变为相应地改变。
以下是我有：根据用户的文本输入设置背景颜色

<label for="color">Color: </label><input type="text" name="color" size="20" id="color" /> 
<button type="button" onClick="javascript:changeBGC(color)">Submit</button>

，然后在我的脚本

function changeBGC(color){ 
    document.bgColor = color; 
}

来源

2014-01-24 user3232047

试试这个：

document.body.style.backgroundColor = document.getElementById('color').value;

document.getElementById('color')是输入元素，.value得到它的价值。

Here's some more documentation关于如何通过JavaScript设置CSS样式。

Fiddle example

来源

2014-01-24 12:54:13 Cerbrus

...或者，如果你有其他backgro你想保持完整的属性（如背景图像），使它'document.body.style.backgroundColor = color'。 –

@ScottSauyet：好主意。编辑。 – Cerbrus

也可以更改标记以下列：

<button type="button" onClick="javascript:changeBGC(color.value)">Submit</button> 
                 ^

Fiddle demo

来源

2014-01-24 12:55:59

或者你可以使用更好的方法

<label for="color">Color:</label> 
<input type="text" name="color" size="20" id="color" value=""/> 
<button type="button">Submit</button> 

var input = document.getElementById('color'); 
var button = document.querySelector('button'); 
button.addEventListener('click', function(event) { 
    event.preventDefault();  
    var color = input.value; 
    document.body.style.background = color; 
});

来源

2014-01-24 13:03:41

'querySelector'？为什么？为什么要声明许多临时变量，比如'var color'？ – Cerbrus

为什么不使用'querySelector'？用我的临时变量来阅读更容易。像这样：** [jsfiddle]（http://jsfiddle.net/P8heY/）**我错了吗？或者这是一种糟糕的编码方式？ –

'querySelector'非常低效。改为使用'document.getElementsByTagName（）'。像这样引入许多临时变量只是要求在大型项目中发生冲突。我同意读起来更容易，但在我看来，这是一个坏习惯。（除非你在该函数中使用temp var，那么通过使用它可以缩短代码） – Cerbrus

根据用户的文本输入设置背景颜色

回答

相关问题