JavaScript で CSS カウンター値にアクセスするにはどうすればよいですか?

JavaScript で CSS で生成されたコンテンツにアクセスする方法

問題:

CSS では、 counter および content プロパティは、図の番号付け (「図 1.1」) などのカスタム コンテンツを生成します。画像。疑問が生じます: JavaScript を使用してこのコンテンツにプログラムでどのようにアクセスできますか?

答え:

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

残念ながら、JavaScript には、CSS によって生成されたライブ カウンター値にアクセスするための直接インターフェイスはありません。 getComputedStyle を介してこれらを取得しようとすると、実際の実行時の値ではなく、スタイルシートで宣言された値のみが返されます。

DOM レベル 2 スタイル カウンター インターフェイス (最初は有望に見えました) にも、現在のカウンター値を取得するプロパティがありません。 .

代替アプローチ

ライブカウンター値に直接アクセスするためこれは実現不可能です。代わりのアプローチは、JavaScript を使用してブラウザー独自のカウンター メカニズムを複製することです。次のスクリプトを使用できます:

window.onload = function () {
  // Get all counter elements
  var counters = Node_getElementsByClassName(document.body, 'counter');

  // Initialize indices
  var indices = [];
  for (var counteri = 0; counteri < counters.length; counteri++) {
    // Get counter level
    var counter = counters[counteri];
    var level = Element_getClassArgument(counter, 'level');

    // Update indices
    while (indices.length <= level) indices.push(0);
    indices[level]++;
    indices = indices.slice(level + 1);

    // Create text node for figure number
    var text = document.createTextNode('Figure ' + indices.join('.'));

    // Insert figure number before counter element
    counter.parentNode.insertBefore(text, counter.nextSibling);

    // If counter has an ID, add figure number to links
    if (counter.id !== '') {
      for (var linki = document.links.length; linki > 0; linki--) {
        var link = document.links[linki];
        if (link.hostname === location.hostname && link.pathname === location.pathname && link.search === location.search && link.hash === '#' + counter.id) {
          // Create text node for link number
          var text = document.createTextNode('(' + indices.join('.') + ')');

          // Insert link number after link
          link.parentNode.insertBefore(text, link.nextSibling);
        }
      }
    }
  }
};

このスクリプトは、見出しと図の要素に図番号を追加し、それらの見出しと図を参照するリンクに対応する番号を追加します。

以上がJavaScript で CSS カウンター値にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。