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

JavaScript での CSS 生成コンテンツとカウンターへのアクセス

背景

CSS のカウンターを使用する場合およびコンテンツ プロパティを使用して、Web ページ上に番号付きのヘッダーと図を生成し、アクセスします。これらのカウンターのリアルタイム値と JavaScript から生成されたコンテンツは、図への参照リンクの追加などのシナリオで必要になる場合があります。

GetComputedStyle の制限

while window.getComputedStyle () は CSS プロパティについての洞察を提供できますが、実際のライブ値ではなくスタイルシートから宣言された値を取得するため、このコンテキストでは不十分です。価値観。カウンターについては、クエリするためのアクセス可能な CSS プロパティさえありません。

Firefox の DOM Level 2 Style Counter

DOM Level 2 Style Counter インターフェイスの初期調査解決策を提案しましたが、Counter オブジェクトには現在のカウンターを取得するためのプロパティも欠けていたため、問題は解決しませんでした。 value.

アプローチ 1: ブルート フォース アルゴリズム

直接インターフェイスがない場合、1 つのオプションは DOM を手動で走査し、カウンターとすべての要素を識別することです。発生に基づいてカウントを増加させます。ただし、このアプローチはリソースを大量に消費し、ブラウザ間で互換性の問題が発生しやすくなります。

アプローチ 2: スクリプトベースのカウンター

代替案は、CSS を置き換えることです。ベースのカウンターとスクリプトベースの同等物。これには、要素に一意の ID を割り当て、カスタム スクリプトを使用してドキュメントを横断し、要素の階層に基づいてカウンタを増分することが含まれます。これは、以下のサンプル コードと同様です。

function Node_getElementsByClassName(element, classNames) {
  var results = [];
  var elements;
  if (typeof element.getElementsByClassName === "function") {
    elements = element.getElementsByClassName(classNames);
    for (var i = 0, l = elements.length; i < l; ++i) {
      results.push(elements[i]);
    }
  }
  return results;
}

function Element_getClassArgument(element, argumentName) {
  var result = null;
  var className = element.getAttribute("class");
  if (className) {
    var pattern = new RegExp("(^|\s)" + argumentName + "=([^\s]+)", "i");
    var match = pattern.exec(className);
    if (match) {
      result = match[2];
    }
  }
  return result;
}

window.onload = function() {
  var counters = Node_getElementsByClassName(document.body, "counter");
  var indices = [];
  for (var counteri = 0; counteri < counters.length; counteri++) {
    var counter = counters[counteri];

    var level = Element_getClassArgument(counter, "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 linki = document.links.length; linki--; ) {
        var link = document.links[linki];
        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);
        }
      }
    }
  }
};

このようなスクリプトを実装することで、次のことが可能になります。ブラウザに依存しない方法でカウンターを効率的に追跡および操作します。

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