根據用戶的文本輸入設置背景顏色

我正在嘗試製作一個文本框，用戶可以在其中鍵入藍色，石灰或黑色等顏色關鍵詞之一，然後單擊「提交」，頁面背景顏色將會變爲相應地改變。
以下是我有：根據用戶的文本輸入設置背景顏色

<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

根據用戶的文本輸入設置背景顏色

回答

相關問題