0

私はJavascriptの初心者なので、これを行う方法に苦労しています。ユーザーがこれら 3 つのボタンのいずれかをクリックしたときに、Web ページの背景色を変更する必要があります。これは HTML の私のコードです。

 <li id ="yellow" ></li>

 <li id="orange" ></li>

 <li id="red" ></li>

したがって、ユーザーがこれらのリンクをクリックすると、Web ページの背景色をその色に変更する必要があります。JavaScriptでこれを行う最良の方法は何ですか?

私はこれを試しました

function changeBGC (color) {
document.bgColor= color;
}

私のhtmlをこれに変更しました

 <li id ="yellow" onClick="changeBGC('yellow')" ></li>

 <li id="orange" onClick="changeBGC('orange')"></li>

 <li id="red" onClick="changeBGC('red')"></li>

リンクをクリックしても何も起こらない

4

3 に答える 3

0

HTML

<ul id="colors">
    <li id="yellow">yello</li>
    <li id="orange">orange</li>
    <li id="red">red</li>
</ul>

Javascript

var colors = document.getElementById('colors');

colors.addEventListener('click', function(e) {
    var el = e.target,
       color = el.id;

    document.documentElement.style.backgroundColor = color;
});

それはうまくいきます... http://jsfiddle.net/Ayh3q/

于 2013-11-05T20:11:48.640 に答える
0

これを試すことができます（例）

HTML:

<ul id="colorSet">
    <li>Yellow</li>
    <li>Orange</li>
    <li>Red</li>
</ul>

JS:

window.onload = function(){
    var ul = document.getElementById('colorSet');
    ul.onclick = function(e){
        var evt = e || window.event;
        var target = evt.target || evt.srcElement;
        document.body.style.backgroundColor = target.innerHTML;
    };
};
于 2013-11-05T20:12:03.570 に答える
0

要素の ID が有効な CSS カラーである限り、属性から読み取ることができます。

Array.prototype.forEach.call(document.getElementsByTagName('li'), function (el) {
    el.addEventListener('click', function (e) {
        document.body.style.background = el.id;
    })
});

このフィドルのようなもの。

于 2013-11-05T20:08:49.290 に答える