前端開發中，我們常常需要動態地改變網頁元素的樣式，其中一個使用場景就是為表格的不同行或單元格設定不同的顏色或背景色。在這種情況下，我們可以使用 JavaScript 的td.style屬性來改變網頁元素的 CSS 樣式。

首先，我們需要選定要改變樣式的表格單元格，可以通過相應的類名或 ID 名來選定。接下來，我們就可以使用td.style對象來設定單元格的 CSS 樣式。

// 定義一個樣式對象
var styleObj = {
backgroundColor: "#f2f2f2",
color: "#333",
fontWeight: "bold"
};
// 選定某個表格單元格，例如 ID 為 table1-cell1 的單元格
var td = document.getElementById("table1-cell1");
// 給該單元格設定樣式
for (var key in styleObj) {
td.style[key] = styleObj[key];
}

以上代碼會將 ID 為 table1-cell1 的單元格背景色設為灰色，字體顏色設為黑色，字體加粗。

我們可以將以上代碼封裝為一個函數，以便在代碼中多次調用：

function setCellStyle(cellId, styleObj) {
var td = document.getElementById(cellId);
for (var key in styleObj) {
td.style[key] = styleObj[key];
}
}
// 使用示例：設置 ID 為 table1-cell2 的單元格樣式
var styleObj2 = {
backgroundColor: "yellow",
color: "blue",
fontWeight: "normal"
};
setCellStyle("table1-cell2", styleObj2);

在以上代碼中，我們定義了一個名為 setCellStyle 的函數，用于設置表格單元格的樣式。通過傳遞單元格 ID 和樣式對象的參數，我們可以輕松地改變表格單元格的樣式。