javascript - 我想根据 select 中的值更改 css 中给出的表格的背景颜色

Question

这是脚本

<script> 
  function abcd() 
   {
     var col=document.getElementById("chess").value;
      document.getElementById("chess").style.background:col;
   }

</script>

我定义颜色的 css 我需要根据从选择中检索到的值进行更改

table
  {
    margin: 80px auto;
    background:black;
  }

需要访问选择的值

<select id="chess" >
   <option name="abc"  value="black"> <i><b>BLACK</b></i></option>
   <option name="abc"  value="red"><i><b>RED</b></i></a></option>
   <option  name="abc" value="yellow"><i><b>YELLOW</b></i></option>
</select>

这是我需要在选择/提交值后更改颜色的表格

<table id="ta">
 <tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
</table

Answer 1

您的代码中存在一些问题:

1. 您没有在代码中的任何地方调用该函数。
2. 您可能想将背景设置为 ID 为 chessboard 的表不是chess .您还必须使用赋值运算符( = )而不是 : .
3. 你有不必要的</a>在第二个选项中。
4. 您错过了收盘>在 </table .

尝试以下方式:

function abcd(op) {
  var col=op.options[op.selectedIndex].value;
  document.getElementById("ta").style.background = col;
}

table{
  margin: 80px auto;
  background:black;
}

<select id="chess" onchange="abcd(this)">
   <option name="abc"  value="black"> <i><b>BLACK</b></i></option>
   <option name="abc"  value="red"><i><b>RED</b></i></option>
   <option  name="abc" value="yellow"><i><b>YELLOW</b></i></option>
</select>
<table id="ta">
   <tr class="chessboard">
      <td class="chessboard">1</td>
      <td class="chessboard">2</td>
      <td class="chessboard">3</td>
      <td class="chessboard">4</td>
      <td class="chessboard">5</td>
      <td class="chessboard">6</td>
      <td class="chessboard">7</td>
      <td class="chessboard">8</td>
  </tr>
</table>