Question

我需要帮助使这个Javascript改变div之间的“我爱乔治布朗”的颜色，我得到它来改变字体颜色，当我设置背景颜色的变化时，唯一有效的颜色是与字体颜色相同的颜色。请帮助，我需要在纯JavaScript中执行此操作。

<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>

Answer 1

您的两个选项都具有相同的ID值colorPicker。尝试将第二个更改为具有不同的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 ;

}

Answer 2

使用重复的ID会给您带来麻烦，您似乎已经发现了这一点。确保两次不使用相同的ID。这是我的建议：

<强> JSFiddle

<强> HTML

<select id="foregroundColorPicker" 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>

<select id="backgroundColorPicker" 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应该反映这些变化：

<强>的Javascript

function changeColor(){
    var newColor = document.getElementById('foregroundColorPicker').value;
    document.getElementById('colorMsg').style.color = newColor;
}

function changeBack(){
    var back = document.getElementById('backgroundColorPicker').value;    
    document.getElementById('colorMsg').style.backgroundColor = back ;
}

Answer 3

试试这个

demo

function changeBack() {

var back = document.getElementById('colorPicker_back').value;
document.getElementById('colorMsg').style.background = back;
}

更改不同的idp>

Answer 4

您使用了相同的ID两次 ID是唯一标识符。它必须在文档中是唯一的才能正常工作。

http://jsfiddle.net/HerrSerker/tuEe6/4/

<!-- ... -->
<select id="colorPicker1" onchange="JavaScript:changeColor()">
<!-- ... -->
<select id="colorPicker2" onchange="JavaScript:changeBack()">
<!-- ... -->

// ...
var newColor = document.getElementById('colorPicker1').value;
// ...
var back = document.getElementById('colorPicker2').value;
// ...

Answer 5

可能你可以试试这个

用于显示文字的HTML和用于选择颜色的按钮

<span id="text">Hello World</span>
<input type="button" id="red" value="Red" />

JS做魔术

(function() {
    var oText = document.getElementById('text');
    var oRed = document.getElementById('red');
    oRed.addEventListener('click', function() {
        oText.setAttribute('style', 'color: red');
        //oText.setAttribute('style', 'background-color: blue'); //In case of background color
    }, false);
})();

根据您的需要进行扩展

Javascript中的多个颜色更改

5 个答案: