의사 요소(Pseudo-Element)를 얻기 위한 JavaScript 방법 및 기술

CSS 의사 요소는 매우 유용합니다. 이를 사용하여 CSS 삼각형을 만들고 도구 설명에 사용할 수 있으며 추가 HTML 요소 없이도 여러 가지 간단한 작업을 완료하는 데 사용할 수 있습니다. 이전에는 의사 요소의 CSS 속성에 JavaScript로 액세스할 수 없었지만 이제는 새로운 JavaScript 메서드를 사용하여 액세스할 수 있습니다! CSS 코드가 다음과 같다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

.element:이전 {
내용: '신규';
색상: rgb(255, 0, 0);
}

.element:before에서 스타일 속성을 가져오려면 다음 JavaScript 코드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var color = window.getCompulatedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color')

window.getCompulatedStyle 메소드의 두 번째 매개변수로 의사 요소를 사용하면 의사 요소 스타일의 속성을 얻을 수 있습니다! 이 팁을 지식 기반에 추가하면 브라우저가 발전함에 따라 의사 요소가 점점 더 유용해질 것입니다!