JavaScript를 사용하여 클래스에서 CSS 스타일 속성을 효율적으로 검색하려면 어떻게 해야 합니까?

JavaScript/jQuery를 사용하여 CSS 클래스에서 스타일 속성 검색

JavaScript에서 스타일 애니메이션 작업을 할 때 정의된 속성에 액세스해야 할 수 있습니다. CSS 수업에서. CSS 변경 사항에 따라 애니메이션을 동적으로 업데이트하여 일관성을 유지해야 할 때 문제가 발생합니다.

한 가지 접근 방식은 대상 CSS 클래스에 할당된 숨겨진 요소를 사용하고 계산된 색상을 추출한 다음 이를 애니메이션에서 활용하는 것입니다. 애니메이션. 그러나 이 방법은 일반적으로 비효율적인 것으로 간주됩니다.

보다 강력한 솔루션은 문서와 관련된 스타일시트를 탐색하고 문제의 특정 선택기와 스타일 속성을 검색하는 것입니다. 다음은 이 작업을 수행하는 함수의 구현입니다.

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

사용 예:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet

이 함수는 쉼표로 구분된 선택기 목록을 분할하고 다음을 확인하는 기능에 의존합니다. 주어진 선택자는 목록의 일부입니다. 동일한 도메인의 그룹화된 규칙과 외부 스타일시트를 모두 지원합니다.

이 기능을 활용하면 CSS 클래스 속성 변경에 따라 스타일 애니메이션을 동적으로 조정할 수 있으므로 웹사이트나 애플리케이션이 미적으로 일관되고 사용자에게 반응하도록 할 수 있습니다. 선호합니다.

위 내용은 JavaScript를 사용하여 클래스에서 CSS 스타일 속성을 효율적으로 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!