javascript - JavaScript 中的多种颜色变化

标签 javascript html css dom-events

我需要帮助让这个 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/

相关文章:

javascript - 基于动态生成的文本和特定图案的颜色 li 元素

Javascript Onclick 按钮 - 取消第二次点击时执行的操作

javascript - 如何使用 Sails.js 和 Waterline 更新 MongoDB 子文档中的特定键?

css - { block :tags} + nth-child in &lt;title&gt; tags

html - CSS - 2个DIV之间的边距冲突

javascript - Google Analytics Embed API - 未找到 OAuth 客户端

html - 来自 sprite 的中心背景图像

javascript - 谷歌地图 API : kml on top of polygon

javascript - 如果 url 是,如何更改文本

html - 强制 Flexbox 元素不占用所有垂直空间