單擊不同元素時更改元素的背景顏色

我期望元素id="colorDisp"在我運行下列其中一個函數時改變顏色，但代替body元素更改顏色。下面單擊不同元素時更改元素的背景顏色

代碼：

function red() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "red"; 
 
\t } 
 
function blue() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "blue"; 
 
\t } 
 
function yellow() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "yellow"; 
 
\t } 
 
function green() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "green"; 
 
\t } \t 
 
function orange() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "orange"; 
 
\t } 
 
function violet() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "violet"; 
 
\t } 
 
function grey() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "grey"; 
 
\t } 
 
function black() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "black"; 
 
\t } 
 
function cream() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "#ffe6e6"; 
 
\t } 
 
function fushia() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "#ff00bf"; 
 
\t } 
 
function white() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "white"; 
 
\t }

<center> 
 
\t <table style="padding-top: 200px;font-size:45"> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td> 
 
\t \t \t <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td> 
 
\t \t \t <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td> 
 
\t \t \t <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td> 
 
\t \t \t <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td> 
 
\t \t \t <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td> 
 
\t \t \t <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td> 
 
\t \t </tr> 
 
\t </table> 
 
\t 
 
</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

來源

2017-03-16 Yeuhan Shen

什麼是你的問題？ – nnnnnn

它發佈在第二張圖片，但無論如何，當你點擊紅色的原始代碼時，背景顏色將變成紅色，但我想要在td id：colorDisp或表 –

中的特定數據中具有背面顏色，非常感謝你們尋求幫助。我在學 –

您應該用想要顯示顏色的代碼替換body，代碼中的代碼爲getElementById('colorDisp')。這裏是解決方案：

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"; 
 
    }

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

來源

2017-03-16 02:05:49

您需要選擇id爲colorDisp，而不是document.body TD元素。您也可以將顏色傳遞給將其應用於元素的單個JavaScript函數。

function colorize(color) 
 
{ 
 
     document.getElementById("colorDisp").style.background = color; 
 
}

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

來源

2017-03-16 02:08:50

你不需要爲此多個功能。請嘗試以下操作：

function changeColor(color) 
 
{ 
 
    document.getElementById('colorDisp').style.backgroundColor = color; 
 
}

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

來源

2017-03-16 02:12:28 Mamun

你應該有這樣的事情。該代碼是好多了（這裏是例子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>

來源

2017-03-16 02:13:48

單擊不同元素時更改元素的背景顏色

回答

相關問題