我需要帮助让这个 Javascript 改变 div 之间“我爱乔治布朗”的颜色,我得到它来改变字体颜色,当我设置背景颜色的变化时,唯一有效的颜色是与字体颜色相同的颜色。请帮忙,我需要在纯 JavaScript 中执行此操作。
http://jsfiddle.net/jonrobert/tuEe6/
<html>
<body>
<script>
function changeColor()
{
var newColor = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.color = newColor;
}
function changeBack()
{
var back = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.background = back ;
}
</script>
<div id="colorMsg" style="font-size:50px; text-align:center; margin-bottom:200px;width:150px;height:100px;padding:5px;">I LOVE GEORGE BROWN</div>
<h2>Choose Font Color</h2>
<select id="colorPicker" onchange="JavaScript:changeColor()">
<option value="transparent">None</option>
<option value="yellow">Yellow</option>
<option value="salmon">Salmon</option>
<option value="lightblue">Light Blue</option>
<option value="limegreen">Lime Green</option>
<option value="cyan">Cyan</option>
<option value="violet">Violet</option>
<option value="red">Red</option>
</select>
<div id="colorMsg"></div>
<h2>Choose Background Color:</h2>
<select id="colorPicker" onchange="JavaScript:changeBack()">
<option value="transparent">None</option>
<option value="yellow">Yellow</option>
<option value="salmon">Salmon</option>
<option value="lightblue">Light Blue</option>
<option value="limegreen">Lime Green</option>
<option value="cyan">Cyan</option>
<option value="violet">Violet</option>
<option value="red">Red</option>
</select>
</body>
</html>
最佳答案
您的两个选择都具有相同的 colorPicker
id 值。尝试将第二个更改为具有不同的 ID,如下所示。
<h2>Choose Background Color:</h2>
<select id="colorPickerBackground" onchange="JavaScript:changeBack()">
<option value="transparent">None</option>
<option value="yellow">Yellow</option>
<option value="salmon">Salmon</option>
<option value="lightblue">Light Blue</option>
<option value="limegreen">Lime Green</option>
<option value="cyan">Cyan</option>
<option value="violet">Violet</option>
<option value="red">Red</option>
</select>
然后在js中
function changeBack()
{
var back = document.getElementById('colorPickerBackground').value;
document.getElementById('colorMsg').style.background = back ;
}
关于javascript - JavaScript 中的多种颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19274647/