javaScript가 유효하지 않은 CSS 속성 값을 검색 할 수 있습니까?

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\\b${propertyName}:\\s*(. ?)\\b`, "i"))[1];

cssstyledeclaration 객체는 JavaScript에서 요소의 스타일 속성을 노출시킵니다. "-my-foo"와 같은 유효하지 않은 속성 이름을 만나면이 객체는 일반적으로 속성을 건너 뛰고 다른 유효한 속성으로 진행합니다.

Dom-level-2 스타일 사양은 선언 블록 내의 모든 CSS 속성이 CSSStyledeClaration 인터페이스를 통해 CSSStyledeClaration 인터페이스를 통해 액세스 할 수 있어야 함을 시사합니다. 그러나 실제로 Chrome 및 Firefox와 같은 브라우저는이 동작을 지원하지 않습니다.

유효하지 않은 CSS 속성의 값에 대한 직접적인 JavaScript 액세스가 부족 했음에도 불구하고 대안 적 접근 방식은 원시 CSS 텍스트를 구문 분석하는 것입니다. 해당 스타일 요소에서 스타일 속성을 추출함으로써 유효하지 않은 경우에도 사용자 정의 속성의 값을 수동으로 식별하고 검색 할 수 있습니다.

코드 예제

document.getElementsByTagName ( "Style") [0] .innerText; const propertyname = "-my-foo"; const value = styletxt.match (new regexp (`\\ b $ {propertyname} : \\ s*(.)) \\ b`, "i")) [1]; 저수준 솔루션으로 간주되며 모든 시나리오에서 가장 효율적이거나 적절한 방법이 아닐 수도 있습니다.