如何用JavaScript为HTML表格id为11的单元格设置黑色样式？

原代码的问题分析 #

1. 选择器错误：document.querySelectorAll('td id') 是无效的CSS选择器语法，无法定位到目标元素；且通过ID获取元素时，直接用getElementById是最直接的方式。
2. 索引错误：即使通过querySelectorAll获取所有<td>，索引是从0开始计数的，第1个<td>对应索引0，而非11。
3. 颜色值错误：'dark'不是有效的CSS颜色值，需使用'black'或'#000'这类标准值。
4. HTML语法错误：<style>里的border: 1px solid grey;>多了多余的>，需删除。

修正后的完整代码 #

修正后的HTML结构

<table border="1" width="300" height="200">
    <tr>
        <td id="11"><<</td>
        <td id="12"></td>
        <td id="13"></td>
        <td id="14"></td>
        <td id="15"></td>
        <td id="16"></td>
        <td id="17"></td>
        <td id="18"></td>
        <td id="19"></td>
        <td id="20"></td>
    </tr>
</table>
<style>
    table {
        border-collapse: collapse;
    }
    td {
        border: 1px solid grey;
    }
</style>
<!-- 新增触发按钮 -->
<button onclick="bthClick()">设置ID为11的单元格为黑色</button>

正确的JavaScript实现

推荐使用getElementById（最高效直接，无需处理数字ID的CSS选择器转义）：

function bthClick(){
    // 通过ID直接获取目标单元格
    const targetCell = document.getElementById('11');
    // 设置文字颜色为黑色
    targetCell.style.color = 'black';
    // 如果需要设置背景色，使用 backgroundColor 属性
    // targetCell.style.backgroundColor = 'black';
}

如果想用CSS选择器方式，需注意数字开头ID的转义规则：

function bthClick(){
    // 数字开头的ID在CSS选择器中需转义为 #\31 1
    const targetCell = document.querySelector('#\\31 1');
    targetCell.style.color = '#000';
}

内容的提问来源于stack exchange，提问作者Warface2009