单击其他元素时更改元素的背景颜色

时间：2017-03-16 01:56:38

标签： javascript

我希望当我运行下面的一个函数时，元素id="colorDisp"会改变颜色，而body元素会改变颜色。

以下代码：

function red()
	{
		document.body.style.backgroundColor = "red";
	}
function blue()
	{
		document.body.style.backgroundColor = "blue";
	}
function yellow()
	{
		document.body.style.backgroundColor = "yellow";
	}
function green()
	{
		document.body.style.backgroundColor = "green";
	}	
function orange()
	{
		document.body.style.backgroundColor = "orange";
	}
function violet()
	{
		document.body.style.backgroundColor = "violet";
	}
function grey()
	{
		document.body.style.backgroundColor = "grey";
	}
function black()
	{
		document.body.style.backgroundColor = "black";
	}
function cream()
	{
		document.body.style.backgroundColor = "#ffe6e6";
	}
function fushia()
	{
		document.body.style.backgroundColor = "#ff00bf";
	}
function white()
	{
		document.body.style.backgroundColor = "white";
	}
<center>
	<table style="padding-top: 200px;font-size:45">
		<tr>
			<td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td>
			<td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td>
			<td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
		</tr>
		<tr>
			<td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td>
			<td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td>
		</tr>
		<tr>
			<td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td>
			<td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td>
		</tr>
		<tr>
			<td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td>
			<td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td>
		</tr>
		<tr>
			<td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td>
			<td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td>
		</tr>
	</table>
	
</center>

Example output for the code above: 

[1]http://i.imgur.com/lhqdFoi.jpg

This is sample output for my question 

[2]http://i.imgur.com/cZw4iT3.jpg

4 个答案:

答案 0 :(得分：1)

您需要选择ID为colorDisp而不是document.body的td元素。您还可以将颜色传递给单个JavaScript函数，该函数将其应用于元素。

＆＃13;
＆＃13; 
function colorize(color)
{
       document.getElementById("colorDisp").style.background = color;
}
＆＃13; 
<body>
    <center>
        <table style="/*padding-top: 200px;*/font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "colorize('red')">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "colorize('blue')">blue</a></td>
                <td rowspan="5" width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "colorize('yellow')">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "colorize('green')">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "colorize('orange')">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "colorize('violet')">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "colorize('grey')">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "colorize('black')">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "colorize('#ffe6e6')">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "colorize('#ff00bf')">fushia</a></td>
            </tr>
        </table>

    </center>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您应该将body替换为要显示颜色的标记，并在代码中替换getElementById('colorDisp')。这是解决方案：

＆＃13;
＆＃13; 
function red()
    {
        document.getElementById('colorDisp').style.backgroundColor = "red";
    }
function blue()
    {
        document.getElementById('colorDisp').style.backgroundColor = "blue";
    }
function yellow()
    {
        document.getElementById('colorDisp').style.backgroundColor = "yellow";
    }
function green()
    {
        document.getElementById('colorDisp').style.backgroundColor = "green";
    }   
function orange()
    {
        document.getElementById('colorDisp').style.backgroundColor = "orange";
    }
function violet()
    {
        document.getElementById('colorDisp').style.backgroundColor = "violet";
    }
function grey()
    {
        document.getElementById('colorDisp').style.backgroundColor = "grey";
    }
function black()
    {
        document.getElementById('colorDisp').style.backgroundColor = "black";
    }
function cream()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ffe6e6";
    }
function fushia()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ff00bf";
    }
function white()
    {
        document.getElementById('colorDisp').style.backgroundColor = "white";
    }
＆＃13; 
<body>
    <center>
        <table style="padding-top: 200px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td>
            </tr>
        </table>

    </center>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您不需要多个功能。请尝试以下方法：

＆＃13;
＆＃13; 
function changeColor(color)
{
    document.getElementById('colorDisp').style.backgroundColor = color;
}
＆＃13; 
<center>
        <table style="padding-top: 10px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "changeColor('red')">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "changeColor('blue')">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "changeColor('yellow')">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "changeColor('green')">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "changeColor('orange')">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "changeColor('violet')">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "changeColor('grey')">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "changeColor('black')">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "changeColor('#ffe6e6')">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "changeColor('#ffe6e6')">fushia</a></td>
            </tr>
        </table>

    </center>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

你应该有这样的东西。代码更好（这是示例http://plnkr.co/edit/FSwM1fDyzB7YgT4Or4B2?p=preview）

function updateColor(event)
{
    var color = event.parentElement.style.backgroundColor;
    document.getElementById('colorDisp').style.backgroundColor = color;
}

HTML：

<table style="padding-top: 200px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "updateColor(this)">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "updateColor(this)">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "updateColor(this)">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "updateColor(this)">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "updateColor(this)">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "updateColor(this)">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "updateColor(this)">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "updateColor(this)">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "updateColor(this)">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "updateColor(this)">fushia</a></td>
            </tr>
        </table>
相关问题
最新问题