JavaScript에서 사용자 정의 또는 유효하지 않은 CSS 속성 값에 액세스할 수 있습니까?

JavaScript에서 유효하지 않은/사용자 정의 CSS 속성 값에 액세스

웹 개발 영역에서 CSS 속성은 스타일 지정 요소에 매우 중요합니다. 수많은 표준 CSS 속성이 정의되어 있지만 고유한 사용자 정의 속성을 사용하려는 시나리오가 발생할 수 있습니다. 이는 질문을 제기합니다. JavaScript에서 이러한 유효하지 않거나 사용자 정의 CSS 속성의 값에 액세스할 수 있습니까?

이를 탐색하려면 다음 CSS를 고려하십시오.

<code class="css">div {
    -my-foo: 42;
}</code>

이러한 스타일이 있다고 가정합니다. 선언, 주어진 div 요소에 대해 JavaScript를 사용하여 -my-foo 속성의 값을 검색할 수 있습니까?

기존 방법

안타깝게도 잘못된 값에 직접 액세스 CSS 속성은 기존 방법으로는 불가능합니다. 브라우저는 인식할 수 없는 속성이나 사용자 정의 속성을 무시하는 경향이 있으므로 CSSStyleDeclaration 객체에 나열된 속성을 찾을 수 없습니다. 예를 들어, 주어진 CSS 예제에서 style:CSSStyleDeclaration 객체는 width 속성만 포함합니다.

가능한 대안

기존 방법은 작동하지 않을 수 있지만 다음이 있습니다. 대안적인 접근 방식. 원시 CSS 텍스트를 수동으로 구문 분석하여 사용자 정의 속성 값을 검색할 수 있습니다. 예를 들어 다음 코드를 사용할 수 있습니다.

<code class="javascript">document.getElementsByTagName("style")[0].innerText;</code>

이 코드는 전체 원시 CSS 텍스트를 검색하고 관심 있는 사용자 정의 속성 값을 검색할 수 있게 해줍니다. 이 방법을 사용하려면 추가 작업이 필요하다는 점에 유의하세요. 처리되며 모든 시나리오에 적합하지 않을 수 있습니다.

참고:

DOM-레벨-2 스타일 사양에 정의된 CSSStyleDeclaration 인터페이스에 주목할 가치가 있습니다. 는 잘못된 속성을 포함하여 지정된 모든 속성이 인터페이스를 통해 액세스 가능해야 함을 의미합니다. 그러나 대부분의 브라우저는 현재 사양의 이 부분을 준수하지 않습니다.

위 내용은 JavaScript에서 사용자 정의 또는 유효하지 않은 CSS 속성 값에 액세스할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!