0

この Javascript が div 間の「I love George Brown」の色を変更するのに助けが必要です。フォントの色を変更するようになりました。背景色の変更を設定すると、機能する唯一の色は同じ色ですフォントの色。助けてください、純粋な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

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 に答える