>  기사  >  웹 프론트엔드  >  렌더링된 요소 없이 외부 스타일시트에서 CSS 속성을 검색하는 방법은 무엇입니까?

렌더링된 요소 없이 외부 스타일시트에서 CSS 속성을 검색하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-19 05:07:02887검색

How to Retrieve CSS Properties from External Stylesheets Without Rendered Elements?

Javascript/jQuery를 사용하여 외부 스타일시트에서 CSS 속성 검색

질문:

하나만 할 수 있나요? 관련 요소가 아직 동적으로 렌더링되지 않은 경우에도 외부 스타일시트에서 CSS 속성 값을 검색하시겠습니까? 일반적인 jQuery 메서드인 $('element').css('property')에서는 요소가 페이지에 있어야 합니다. 대체 접근 방식이 있습니까?

답변:

예, 기존 요소에 의존하지 않고 CSS 속성 값을 얻을 수 있습니다. 한 가지 방법은 jQuery와 임시로 삽입된 요소를 활용합니다. 작동 방식은 다음과 같습니다.

jQuery 솔루션:

  1. jQuery를 사용하여 숨겨진 요소를 만듭니다(예:

    (CSS를 통해 숨김).

  2. 페이지에 숨겨진 요소를 추가합니다.
  3. $('element').css('property')를 사용하여 숨겨진 요소의 CSS 속성에 액세스하고 기록합니다. .
  4. 마지막으로 페이지에서 숨겨진 요소를 제거합니다.
// Scoping function just to avoid creating a global
(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

이 솔루션을 사용하면 페이지에 요소가 없어도 CSS 속성 값에 동적으로 액세스할 수 있습니다.

위 내용은 렌더링된 요소 없이 외부 스타일시트에서 CSS 속성을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.