0

我需要帮助使这个 Javascript 更改 div 之间“我爱乔治布朗”的颜色，我得到它来更改字体颜色，当我设置背景颜色的更改时，唯一有效的颜色是相同的颜色字体颜色。请帮忙，我需要用纯javascript来做这件事。

http://jsfiddle.net/jonrobert/tuEe6/ 

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

5 回答 5

4

您的两个选择都具有相同的 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 ;

}
于 2013-10-09T14:22:55.207 回答
3

使用重复的 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 ;
}
于 2013-10-09T14:22:45.140 回答
1

也许你可以试试这个

用于显示文本的 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);
})();

将此扩展到您的需求

于 2013-10-09T14:32:37.910 回答
1

尝试这个

演示

function changeBack() {

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

chage 不同的 id。

于 2013-10-09T14:24:17.157 回答
1

您两次使用了相同的 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;
// ...
于 2013-10-09T14:26:05.957 回答