JavaScript에서 잘못된 사용자 정의 CSS 속성에 액세스

- 접두사를 사용하여 사용자 정의 CSS 속성을 생성할 수 있습니다. 그러나 이러한 사용자 정의 속성은 JavaScript에서 액세스할 수 있습니까?

불행히도 적어도 Chrome 및 Firefox와 같은 주요 브라우저에서는 대답이 '아니요'입니다. 잘못된 이름을 가진 사용자 정의 CSS 속성은 CSS 파서에서 무시됩니다. 예를 들어 다음 CSS를 고려해보세요.

div {
    -my-foo: 42;
}

이 CSS가 div에 적용되더라도 JavaScript를 사용하여 -my-foo 속성에 액세스하려고 하면 아무것도 반환되지 않습니다. CSSStyleDeclaration 객체에는 너비 또는 높이와 같은 유효한 속성만 포함됩니다.

이 동작은 CSSStyleDeclaration 사양을 따릅니다. 사양에는 개체가 "지정된 속성"만 포함해야 한다고 명시되어 있으며 이는 사용자 지정 속성이 인식되지 않음을 의미합니다. 그러나 일부 구현에서는 사용자 정의 속성에 대한 액세스를 지원할 수 있지만 이는 보장되지 않습니다.

사용자 정의 CSS 속성에 액세스하는 것이 애플리케이션에 중요한 경우 원시 CSS 텍스트를 구문 분석하여 JavaScript의 제한을 우회할 수 있습니다. 이는 스타일 요소의 innerText 속성을 사용하여 수행할 수 있습니다.

document.getElementsByTagName("style")[0].innerText

이 접근 방식은 작동하지만 다음과 같지 않습니다. CSSStyleDeclaration 객체에서 직접 속성에 액세스하는 것처럼 간단합니다. 또한 CSS 텍스트에 대한 추가 구문 분석 및 조작이 필요합니다.