立即更改bg顏色

我是一個noob，我試圖讓一些JavaAcript立即根據標有'顏色'的文本框中的十六進制代碼更改網站的背景顏色。它在我按下提交按鈕時起作用，但我希望它在無需提交的情況下自行更改。立即更改bg顏色

在此先感謝

$(function(){ 
    setInterval(changeBackground, 1); 
}); 



function changeBackground() { 
    // The working function for changing background color. 
    document.bgColor = document.getElementById("color").value; 
}

來源

2017-04-24 user2956284

['document.bgColor'（https://developer.mozilla.org/en-US/docs/Web/API/Document/bgColor）是老了，真的真的真的很老。請改用'document.body.style.backgroundColor' – Andreas

退房addEventListener和input event。 addEventListener可讓您對諸如點擊次數，文本框值更改等事件做出反應。每次用戶在相關元素中輸入內容時都會觸發input事件。

var colorEl = document.getElementById('color'); 
 
colorEl.addEventListener('input', function() { 
 
    document.bgColor = colorEl.value; 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

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

人提示：bgColor已不再這樣做的首選方式。它已被棄用，並不保證在瀏覽器中工作。每次造型時使用CSS要好得多。

document.style.backgroundColor = colorEl.value;

如果你寧願等到用戶輸入完然後在其他地方把焦點移動，你可以使用change event。

var colorEl = document.getElementById('color'); 
 
colorEl.addEventListener('change', function() { 
 
    document.bgColor = colorEl.value; 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

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

來源

2017-04-24 16:20:38

你有我在下面的代碼所做的onchange事件偵聽器分配給您的<input>：

document.getElementById('color').addEventListener('change', changeBackground);

來源

2017-04-24 16:21:04 Syncro

嘗試觀看事件的關鍵了

function changeBackground() { 
 
    document.bgColor = '#' + document.getElementById("color").value; 
 
}

<input id="color" onkeyup="changeBackground()" />

來源

2017-04-24 16:24:16

感謝大家的建議。

Cyril Beeckman的下面的建議對我很好，但我看到他們都會工作。歡呼聲

function changeBackground() { 
 
    document.bgColor = '#' + document.getElementById("color").value; 
 
}

<input id="color" onkeyup="changeBackground()" />

來源

2017-04-25 08:50:12 user2956284

立即更改bg顏色

回答

相關問題