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. 93f0f5c25f18dab9d176bd4f6de5d30e 태그에 c9ccee2e6ea535a969eb3f532ad9fe89 내부 스타일을 삽입합니다.

또는 jQuery를 사용하세요.

var style = document.createElement("style"); 
document.head.appendChild(style); 
sheet = style.sheet; 
sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

$('<style>.red::before{color:green}</style>').appendTo('head');

5. 의사 요소의 콘텐츠 속성 값을 수정합니다.

방법 1. CSSStyleSheet의 insertRule을 사용하여 의사 요소의 스타일을 수정합니다.

var latestContent = "修改过的内容";
var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);

방법 2. DOM 요소의 data-* 속성을 사용하여 콘텐츠 값을 변경합니다.

六. :before和:after伪元素的常见用法总结：

1. 利用content属性，为元素添加内容修饰：

1） 添加字符串：

使用引号包括一段字符串，将会向元素内容中添加字符串。栗子：

a:after { content: "after content"; }

2） 使用attr()方法，调用当前元素的属性的值：

栗子：

a:after { content: attr(href); }
a:after { content: attr(data-attr); }

3）使用url()方法，引用多媒体文件：

栗子：

a::before { content: url(logo.png); }

4) 使用counter()方法，调用计时器：

栗子：

h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " }

2. 清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

3. 特效妙用：

// CSS代码
a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before, a::after { 
content: "";
transition: all 0.2s;
}
a::before { 
left: 0;
}
a::after { 
right: 0;
}
a:hover::before, a:hover::after { 
position: absolute;
}
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
// HTML代码
<a href="#">我是个超链接</a>

4. 特殊形状的实现：

举个栗子：（譬如对话气泡）

// CSS代码
.tooltip {
position: relative;
display: inline-block;
padding: 5px 10px;
background: #80D4C8;
}
.tooltip:before {
content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -5px;
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #80D4C8;
}
// HTML代码
<div class="tooltip">I'm a tooltip.</div>

:before 和 :after 伪元素结合更多CSS3强大的特性，还可完成非常多有趣的特效和 hack ，这里权当抛砖引玉。

六. 一点小小建议：

伪元素的content属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了SEO优化，最好不要在伪元素中包含与文档相关的内容。

修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。

修改伪元素的content属性的值，建议使用利用DOM的data-*属性来更改。

以上所述是小编给大家介绍的JS控制伪元素的方法汇总，希望对大家有所帮助！