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

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

您不会在代码中的任何地方调用该函数。
您可能希望将背景设置为ID为chessboard而不是chess的表。您还必须使用赋值运算符（=）而不是:。
第二个选项中没有多余的</a>。
您错过了>中的结尾</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>

Answer 2

这里有一些问题需要解决。

在选项菜单上没有事件侦听器，因此在选择其他选项时，没有任何东西可以调用www.ernaproperties.com函数。
abcd不是预期的分配；您可能是说background:col。
您的HTML在很多方面都令人怀疑：您的background = col松动，并且无法粘贴</a>和<i>来尝试设置选择菜单的样式。为此使用CSS。 option元素上的name属性已作废；如有必要，请使用ID。您同时为<b>和一堆chessboard使用类名<tr>并且有<td>（可能是表的缩写），这也让我感到奇怪？）和实际上是颜色选择器的ta元素。良好的做法是使您的命名保持一致和精确，以保持代码的可读性。最后，您缺少一个chess来关闭最后一个>元素。

<table>

const selector = document.getElementById("chess");
const ta = document.getElementById("ta");

selector.addEventListener("change", e => 
  ta.style.background = selector.options[selector.options.selectedIndex].value
);

table {
  margin: 10px auto;
  width: 90%;
  height: 90vh;
  background: black;
}

我想从选择的值更改csss中给定的表的背景颜色

2 个答案: