如何使用 JavaScript 存取 CSS 產生的內容？

使用JavaScript 存取CSS 產生的內容

在CSS 中，計數器和內容屬性可用於產生動態內容，例如編號標題和數字。然而，在 JavaScript 中存取此生成的內容會帶來挑戰，因為可能無法透過標準方法輕鬆存取即時值。

存取計數器值

一種方法是利用DOM Level 2 樣式計數器介面。但是，此方法有局限性，正如嘗試使用 getCounterValue() 存取計數器值時遇到的錯誤所證明的那樣。

存取產生的內容

另一種可能性是識別偽元素（在本例中為：after）並提取其節點值。然而，由於缺乏透過 DOM 存取偽元素內容的標準機制，這種方法也可能不可靠。

解決方法

作為解決方法，可以實現基於腳本的解決方案來模擬瀏覽器的計數機制。這涉及遍歷 DOM 以計算觸發計數器的元素數量並插入適當的值。

window.onload = function () {
    var counters = document.querySelectorAll('.counter');
    var indices = [];
    for (var i = 0; i < counters.length; i++) {
        var counter = counters[i];
        var level = parseInt(counter.getAttribute('level'));
        while (indices.length <= level) indices.push(0);
        indices[level]++;
        indices = indices.slice(level + 1);
        var text = document.createTextNode('Figure ' + indices.join('.'));
        counter.parentNode.insertBefore(text, counter.nextSibling);

        if (counter.id !== '') {
            for (var j = 0; j < document.links.length; j++) {
                var link = document.links[j];
                if (
                    link.hostname === location.hostname &&
                    link.pathname === location.pathname &&
                    link.search === location.search &&
                    link.hash === '#' + counter.id
                ) {
                    var text = document.createTextNode('(' + indices.join('.') + ')');
                    link.parentNode.insertBefore(text, link.nextSibling);
                }
            }
        }
    }
};

此方法透過明確更新計數器值並產生適當的標籤來模仿瀏覽器的行為。它提供了比依賴即時計數器值更便攜、更可靠的解決方案，特別是在無法透過標準 API 存取此類資訊的環境中。

以上是如何使用 JavaScript 存取 CSS 產生的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！