> 웹 프론트엔드 > CSS 튜토리얼 > JavaScript 또는 jQuery를 사용하여 CSS 클래스 스타일 속성에 어떻게 액세스할 수 있습니까?

JavaScript 또는 jQuery를 사용하여 CSS 클래스 스타일 속성에 어떻게 액세스할 수 있습니까?

Barbara Streisand
풀어 주다: 2024-12-09 06:08:14
원래의
986명이 탐색했습니다.

How Can I Access CSS Class Style Attributes Using JavaScript or jQuery?

JavaScript/jQuery를 사용하여 CSS 클래스 스타일 속성에 액세스

CSS 애니메이션을 처리할 때 요소의 스타일 속성에 액세스하는 것이 어려울 수 있습니다. JavaScript 또는 jQuery를 사용하는 CSS 클래스에서. 그러나 이러한 속성을 검색하는 효율적인 방법이 있습니다.

사용자 정의 함수를 사용하여 스타일 속성 검색

한 가지 접근 방식은 문서의 스타일 시트를 순회하는 사용자 정의 JavaScript 함수를 만드는 것입니다. 일치하는 CSS 선택기와 스타일을 찾고 있습니다. 다음은 샘플 함수입니다.

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}
로그인 후 복사

예를 들어 .highlight 클래스의 색상 속성을 가져오려면:

var color = getStyleRuleValue('color', '.highlight');
로그인 후 복사

참고: 이 함수는 스타일 시트가 인라인으로 정의되었거나 현재 문서와 동일한 도메인을 갖습니다.

적용 애니메이션

검색된 스타일 속성을 사용하여 애니메이션에 적용할 수 있습니다.

$(this).animate({
    color: color // Retrieved color attribute
}, 750);
로그인 후 복사

CSS 클래스를 빨간색에서 파란색으로 업데이트하면 애니메이션이 그에 따라 조정됩니다. 업데이트된 CSS 색상 스타일로

위 내용은 JavaScript 또는 jQuery를 사용하여 CSS 클래스 스타일 속성에 어떻게 액세스할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿