JS_javascript 기술에서 의사 요소를 제어하는 ​​방법 요약

1. 이유:

이 기사는 jq를 사용하여 의사 요소를 얻는 방법에 대한 OSC 커뮤니티의 질문에서 시작되었습니다. 내 첫 번째 생각은 강력한 CSS 쿼리가 의사 요소를 얻을 수 있어야 한다는 것입니다.

그러나 실제로는 CSS Query가 불가능합니다. 즉, $(":before"), $(dom).find(":before") 또는 document.querySelector(":before")를 통해 :before 의사 요소를 얻을 수 없습니다.

이를 위해서는 의사요소(Pseudo-elements)를 다시 이해해야 했습니다. JS를 사용하여 의사 요소를 직접 가져올 수 없는 이유는 무엇입니까?

예를 들어 ::before 및 ::after 의사 요소는 CSS 렌더링에서 요소의 헤드 또는 테일에 콘텐츠를 삽입하는 데 사용됩니다. 이들은 문서에 바인딩되지 않으며 문서 자체에는 영향을 미치지 않습니다. 최종 스타일에만 영향을 미칩니다. 이렇게 추가된 콘텐츠는 DOM에 표시되지 않고 CSS 렌더링 레이어에만 추가됩니다.

사실 의사 요소는 브라우저에서 렌더링할 수 있지만 DOM 요소 자체는 아닙니다. 문서에 존재하지 않으므로 JS가 직접 조작할 수 없습니다. jQuery의 선택자는 모두 DOM 요소를 기반으로 하므로 의사 요소를 직접 조작할 수 없습니다.

의사 요소의 스타일을 어떻게 조작하나요?

이러한 이유로 JS에서 의사 요소를 제어하는 ​​방법을 나중에 쉽게 참고할 수 있도록 요약해 보기로 했습니다.

2. 의사 요소란 무엇입니까?

우선 의사요소(Pseudo Element)가 무엇인지 간략히 알아보겠습니다. ::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop이라는 6개의 의사 요소가 있습니다.

주요 웹페이지에서 가장 일반적으로 사용되는 의사 요소는 ::after 및 ::before입니다.

이러한 의사 요소의 의미에 대해서는 내 다른 기사 "CSS 의사 요소 선택기 요약"을 참조하세요.

CSS3에서는 의사 클래스와 의사 요소를 구별하기 위해 의사 요소에 하나의 콜론(:) 대신 두 개의 콜론(::) 구문을 사용하는 것이 좋습니다. 대부분의 브라우저는 두 가지 프레젠테이션 구문을 모두 지원합니다. ::selection만 항상 두 개의 콜론(::)으로 시작할 수 있습니다. IE8은 단일 콜론 구문만 지원하므로 IE8과 호환되려면 단일 콜론을 사용하는 것이 가장 안전한 방법입니다.

3. 의사 요소의 속성 값을 가져옵니다.

의사 요소의 속성 값을 얻으려면 window.getComputeStyle() 메서드를 사용하여 의사 요소의 CSS 스타일 선언 객체를 얻을 수 있습니다. 그런 다음 getPropertyValue 메서드를 사용하거나 키-값 액세스를 직접 사용하여 해당 속성 값을 가져옵니다.

구문: window.getCompulatedStyle(element[, pseudoElement])

매개변수는 다음과 같습니다.

요소(객체): 의사 요소가 위치한 DOM 요소

pseudoElement(String): 의사 요소 유형입니다. 선택적 값은 다음과 같습니다: ":after", ":before", ":first-line", ":first-letter", ":selection", ":backdrop"

예:

// CSS代码
#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

비고:

1. getPropertyValue() 및 직접 키-값 액세스 모두 CSSStyleDeclaration 개체에 액세스할 수 있습니다. 차이점은 다음과 같습니다.

float 속성의 경우 키-값 액세스를 사용하면 getComputeStyle(element, null).float를 직접 사용할 수 없지만 cssFloat 및 styleFloat를 사용할 수 있습니다.
키-값 액세스를 직접 사용하는 경우 다음과 같이 속성 키를 카멜 표기법으로 작성해야 합니다.
getPropertyValue() 메소드는 카멜 표기법으로 작성할 필요가 없습니다(카멜 표기법은 지원되지 않음). 예: style.getPropertyValue("border-top-color")
getPropertyValue() 메소드는 IE9+ 및 IE6~8의 기타 최신 브라우저에서 지원됩니다. 대신 getAttribute() 메소드를 사용할 수 있습니다.

2. 기본 의사 요소는 "display: inline"입니다. display 속성이 정의되지 않은 경우 CSS에서 width 속성 값을 명시적으로 "100px"와 같은 고정 크기로 설정하더라도 최종적으로 얻은 너비 값은 여전히 ​​"auto"입니다. 인라인 요소의 너비와 높이를 맞춤설정할 수 없기 때문입니다. 해결책은 의사 요소의 표시 속성을 "block", "inline-block" 또는 기타로 수정하는 것입니다.

4. 의사 요소 스타일 변경:

방법 1. 클래스를 변경하여 의사 요소의 속성 값을 변경합니다.

예를 들어주세요:

// CSS代码
.red::before { 
content: "red"; 
color: red; 
}
.green::before { 
content: "green"; 
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');

방법 2. CSSStyleSheet의 insertRule을 사용하여 의사 요소의 스타일 수정:

예를 들어주세요:

document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

방법 3.

태그에