立即更改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颜色

回答

相关问题