JavaScript を使用して CSS で生成されたコンテンツにアクセスするにはどうすればよいですか?

JavaScript を使用した CSS 生成コンテンツへのアクセス

CSS 内では、カウンターとコンテンツ プロパティを使用して、番号付けヘッダーやヘッダーなどの動的コンテンツを生成できます。数字。ただし、この生成されたコンテンツに JavaScript でアクセスするには、標準のメソッドではライブ値にすぐにアクセスできない可能性があるため、課題が生じます。

カウンター値へのアクセス

1 つのアプローチは、次のことを利用することです。 DOM レベル 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 中国語 Web サイトの他の関連記事を参照してください。