JavaScript 如何跨瀏覽器可靠地存取 CSS 產生的內容？

使用 JavaScript 存取 CSS 產生的內容

在 CSS 中，計數器和內容屬性用於產生內容，例如標題或圖形的編號。可以出於各種目的從 JavaScript 存取產生的內容，例如將數字附加到反向連結。

存取計數器值

存取計數器值的一種方法是透過 window.getCompulatedStyle( ） 功能。但是，這僅傳回樣式表中聲明的初始值，而不是即時值。

使用 DOM Level 2 樣式計數器介面

DOM Level 2 樣式計數器介面提供了更直接的存取計數器值。但是，它僅在 Firefox 中實現，並沒有提供檢索當前值的方法。

讀取偽元素內容

另一種方法是透過讀取偽元素內容DOM。這涉及使用 treeWalker 選擇偽元素，然後檢索其 nodeValue。不幸的是，這種方法並不適用於所有瀏覽器。

模擬計數器行為

作為後備方案，可以使用 JavaScript 來模擬瀏覽器的計數器機制。這涉及追蹤每個級別的計數器並根據需要遞增它們。然後可以將產生的內容動態插入 DOM 中。

例如，為元素分配帶有「level」參數的 CSS 類，然後使用 JavaScript 增加等級並插入計數器可以實現類似的功能。這種方法提供了更大的靈活性和跨瀏覽器相容性。

以上是JavaScript 如何跨瀏覽器可靠地存取 CSS 產生的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！