JavaScript에서 잘못된/사용자 정의 CSS 속성 값을 검색하는 방법은 무엇입니까?

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

"-my-foo"와 같은 사용자 정의 또는 유효하지 않은 CSS 속성을 정의할 때 개발자는 JavaScript에서 해당 값을 검색하는 것이 가능한지 궁금할 수 있습니다.

이 질문에 답하기 위해 아래와 같은 CSS가 있다고 가정해 보겠습니다.

div {
    -my-foo: 42;
}

"-my 값에 액세스하려고 합니다. CSSStyleDeclaration 개체를 통해 JavaScript에서 -foo"를 사용하면 문제가 발생할 수 있습니다. Chrome과 Firefox의 테스트에서는 이러한 브라우저가 유효하지 않은 속성을 건너뛰고 유효한 속성만 노출하는 것으로 나타났습니다. 예를 들어 다음과 같은 CSS를 사용하면

div {
    width: 100px;
    -my-foo: 25px;
}

CSSStyleDeclaration 객체에는 다음 키만 포함됩니다.

0: width
cssText: "width: 100px"
length: 1

따라서 다음을 사용하여 JavaScript에서 "-my-foo" 값을 가져옵니다. 이 방법은 실현 가능하지 않습니다.

그러나 DOM-레벨-2 스타일 사양에는 "구현 [브라우저]는 CSSStyleDeclaration 인터페이스를 통해 ... 지정된 모든 속성에 대한 액세스를 제공해야 합니다."라고 명시되어 있습니다. 이는 브라우저가 인식하지 못하는 경우에도 이론적으로 개체의 잘못된 속성을 나열해야 함을 의미합니다.

해결 방법으로 원시 CSS 텍스트를 구문 분석하여 사용자 정의 속성의 값을 검색할 수 있습니다. 그러나 이 접근 방식은 상당한 노력이 필요하고 항상 안정적이거나 효율적이지 않을 수 있으므로 권장되지 않습니다.

위 내용은 JavaScript에서 잘못된/사용자 정의 CSS 속성 값을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!