如何使用 JavaScript 為 HTML 表的第 n 個元素着色？

Question

我嘗試使用：

td:nth-of-type(5).style.backgroundColor("blue");

使用 JavaScript 為第 5 個<td>元素着色，但我收到：

未捕獲的 ReferenceError：第 n 個未定義於：1:4

正確的代碼是什么？

Answer 1

您不能像在 javascript 中那樣使用 css。 您需要使用選擇器並分配如下值：

document.querySelector('td:nth-of-type(5)').style.backgroundColor = 'blue';

查看querySelector和querySelectorAll的文檔以獲得更多幫助。

Answer 2

您可以使用 CSS 變量並像這樣在 JS 中更改它的值（請查看瀏覽器對 CSS 變量的支持）：

 document.documentElement.style.setProperty('--bg-color', "blue");

 :root { --bg-color: initial; } td:nth-of-type(5) { background: var(--bg-color); }

 <table border=1> <tr> <td>a.1</td> <td>a.2</td> <td>a.3</td> <td>a.4</td> <td>a.5</td> <td>a.6</td> </tr> <tr> <td>b.1</td> <td>b.2</td> <td>b.3</td> <td>b.4</td> <td>b.5</td> <td>b.6</td> </tr> </table>

或者，對於更兼容瀏覽器的東西，您可以使用querySelectorAll()和.forEach()使用您的選擇器遍歷所有選定的元素：

 document.querySelectorAll("td:nth-of-type(5)").forEach(td => { td.style.backgroundColor = "blue"; });

 <table border=1> <tr> <td>a.1</td> <td>a.2</td> <td>a.3</td> <td>a.4</td> <td>a.5</td> <td>a.6</td> </tr> <tr> <td>b.1</td> <td>b.2</td> <td>b.3</td> <td>b.4</td> <td>b.5</td> <td>b.6</td> </tr> </table>