根據表單內容即時更新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; 
}; 

但這並不檢查用戶的輸入（所以你必須把它擴大） 。