在 CSS 中,計數器和內容屬性用於產生內容,例如標題或圖形的編號。可以出於各種目的從 JavaScript 存取產生的內容,例如將數字附加到反向連結。
存取計數器值的一種方法是透過 window.getCompulatedStyle( ) 功能。但是,這僅傳回樣式表中聲明的初始值,而不是即時值。
DOM Level 2 樣式計數器介面提供了更直接的存取計數器值。但是,它僅在 Firefox 中實現,並沒有提供檢索當前值的方法。
另一種方法是透過讀取偽元素內容DOM。這涉及使用 treeWalker 選擇偽元素,然後檢索其 nodeValue。不幸的是,這種方法並不適用於所有瀏覽器。
作為後備方案,可以使用 JavaScript 來模擬瀏覽器的計數器機制。這涉及追蹤每個級別的計數器並根據需要遞增它們。然後可以將產生的內容動態插入 DOM 中。
例如,為元素分配帶有「level」參數的 CSS 類,然後使用 JavaScript 增加等級並插入計數器可以實現類似的功能。這種方法提供了更大的靈活性和跨瀏覽器相容性。
以上是JavaScript 如何跨瀏覽器可靠地存取 CSS 產生的內容?的詳細內容。更多資訊請關注PHP中文網其他相關文章!