使用javascript將CSS類添加到td標簽

Question

我正在嘗試以Greasemonkey腳本的形式制作Moodle的時間表。

這個想法是突出當前小時的主題，但我找不到做到這一點的可行方法。

我將css注入頁面，並使用jQuery將注入的css類添加到目標td。

這是注入頁面標題的css代碼：

.current_class {background-color:green};

這是用於將類添加到td的javascript代碼：

var cell = $("#timetable_table").find("tr").eq(current+1).find("td").eq(date.getDay());

我知道cell是正確的td，因為我可以cell.text（“ foo”）並修改正確的cell，但是當我這樣做時：

cell.addClass("current_class");

桌子保持不變。

我不必那樣做，我只想動態更改td標簽上的背景，所以我不介意使用其他方法。

謝謝。

Answer 1

首先，我建議您更改為：

var cell = document.getElementById('timetable_table').rows(current+1).cells(date.getDay());

和：

cell.className += (cell.className ? " " : "")+"current_class";

但這僅僅是出於性能原因

造成此問題的可能原因是，您在其他地方定義的background-color具有更高的特異性。 嘗試使用此CSS選擇器：

#timetable_table tr>td.current_class{background-color:green};

那應該足夠具體才能獲勝。

Answer 2

使用className屬性進行更改或添加類，例如：

tbody.firstChild.lastChild.className='tr-parent1';