JavaScript를 사용하여 CSS 생성 콘텐츠 및 카운터에 어떻게 액세스할 수 있습니까?

JavaScript에서 CSS 생성 콘텐츠 및 카운터에 액세스

배경

CSS 카운터를 사용할 때 웹페이지에 번호가 매겨진 헤더와 그림을 생성하는 콘텐츠 속성, 실시간 값에 액세스 이러한 카운터와 JavaScript에서 생성된 콘텐츠는 그림에 참조 링크를 추가하는 등의 시나리오에 필요할 수 있습니다.

GetCompulatedStyle의 제한 사항

window.getCompulatedStyle()은 다음에 대한 통찰력을 제공할 수 있습니다. CSS 속성은 실제 실시간 값이 아닌 스타일시트에서 선언된 값을 검색하므로 이 컨텍스트에서는 부족합니다. 카운터의 경우 쿼리할 액세스 가능한 CSS 속성조차 없습니다.

Firefox의 DOM 레벨 2 스타일 카운터

DOM 레벨 2 스타일 카운터 인터페이스의 초기 탐색 해결책을 제안했지만 Counter 개체에도 현재 카운터를 검색하기 위한 속성이 부족하여 문제가 지속되었습니다. value.

접근법 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!