JavaScript에서 CSS 카운터 값에 액세스하는 방법은 무엇입니까?

JavaScript에서 CSS 생성 콘텐츠에 액세스하는 방법

문제:

CSS에서, 카운터 및 콘텐츠 속성은 이미지에 대한 그림 번호 매기기("그림 1.1")와 같은 사용자 정의 콘텐츠를 생성합니다. 질문이 생깁니다. JavaScript를 사용하여 어떻게 이 콘텐츠에 프로그래밍 방식으로 액세스할 수 있습니까?

답변:

라이브 카운터 값 액세스

안타깝게도 JavaScript에는 CSS에서 생성된 라이브 카운터 값에 액세스할 수 있는 직접적인 인터페이스가 없습니다. getCompulatedStyle을 통해 검색을 시도하면 실제 런타임 값이 아닌 스타일시트에 선언된 값만 반환됩니다.

처음에는 유망해 보였던 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!