Zusammenfassung der Methoden zur Steuerung von Pseudoelementen in JS_Javascript-Kenntnissen

1. Grund:

Dieser Artikel entstand aus einer Frage in der OSC-Community darüber, wie man mit jq Pseudoelemente erhält. Mein erster Gedanke ist, dass die leistungsstarke CSS-Abfrage in der Lage sein sollte, Pseudoelemente abzurufen.

Die CSS-Abfrage kann dies jedoch tatsächlich nicht. Das heißt, wir können das :before-Pseudoelement nicht über $(":before"), $(dom).find(":before") oder document.querySelector(":before") erhalten.

Dazu musste ich Pseudoelemente (Pseudoelemente) neu verstehen. Warum können wir mit JS nicht direkt Pseudoelemente abrufen?

Zum Beispiel werden die Pseudoelemente ::before und ::after verwendet, um beim CSS-Rendering Inhalte in den Kopf oder das Ende eines Elements einzufügen. Sie sind nicht an das Dokument gebunden und wirken sich nicht auf das Dokument selbst aus wirken sich nur auf den endgültigen Stil aus. Diese hinzugefügten Inhalte werden nicht im DOM angezeigt, sondern nur in der CSS-Rendering-Ebene hinzugefügt.

Tatsächlich können Pseudoelemente vom Browser gerendert werden, sie sind jedoch selbst keine DOM-Elemente. Es existiert nicht im Dokument, daher kann JS es nicht direkt bearbeiten. Die Selektoren von jQuery basieren alle auf DOM-Elementen und können daher Pseudoelemente nicht direkt bedienen.

Wie manipuliert man den Stil von Pseudoelementen?

Aus diesem Grund habe ich beschlossen, die Methoden zur Steuerung von Pseudoelementen in JS zusammenzufassen, um sie in Zukunft leichter nachschlagen zu können.

2. Was sind die Pseudoelemente:

Lassen Sie uns zunächst kurz darüber sprechen, was Pseudoelemente sind. Es gibt sechs Pseudoelemente, nämlich ::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop.

Die am häufigsten verwendeten Pseudoelemente in großen Webseiten sind ::after und ::before.

Informationen zur Semantik dieser Pseudoelemente finden Sie in meinem anderen Artikel „Zusammenfassung der CSS-Pseudoelementauswahl“.

In CSS3 wird empfohlen, dass Pseudoelemente die Syntax mit zwei Doppelpunkten (::) anstelle eines Doppelpunkts (:) verwenden, um Pseudoklassen und Pseudoelemente zu unterscheiden. Die meisten Browser unterstützen beide Präsentationssyntaxen. Nur ::selection kann immer mit zwei Doppelpunkten (::) beginnen. Da IE8 nur die Syntax mit einem Doppelpunkt unterstützt, ist die Verwendung eines einzelnen Doppelpunkts am sichersten, wenn Sie mit IE8 kompatibel sein möchten.

3. Ermitteln Sie den Attributwert des Pseudoelements:

Um den Attributwert eines Pseudoelements zu erhalten, können Sie die Methode window.getComputedStyle() verwenden, um das CSS-Stildeklarationsobjekt des Pseudoelements abzurufen. Verwenden Sie dann die Methode getPropertyValue oder verwenden Sie direkt den Schlüsselwertzugriff, um den entsprechenden Eigenschaftswert abzurufen.

Syntax: window.getComputedStyle(element[, pseudoElement])

Parameter sind wie folgt:

Element (Objekt): das DOM-Element, in dem sich das Pseudoelement befindet;

pseudoElement (String): Pseudoelementtyp. Optionale Werte sind: „:after“, „:before“, „:first-line“, „:first-letter“, „:selection“, „:backdrop“;

Zum Beispiel:

// 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!"

Bemerkungen:

1. Sowohl getPropertyValue() als auch der direkte Schlüsselwertzugriff können auf das CSSStyleDeclaration-Objekt zugreifen. Die Unterschiede zwischen ihnen sind:

Wenn Sie für Float-Attribute den Schlüsselwertzugriff verwenden, können Sie getComputedStyle(element, null).float nicht direkt verwenden, aber cssFloat und styleFloat; Wenn Sie den Schlüsselwertzugriff direkt verwenden, muss der Attributschlüssel in Kamel-Schreibweise geschrieben werden, z. B.: style.backgroundColor; Die getPropertyValue()-Methode muss nicht in Camel-Case geschrieben werden (Camel-Case wird nicht unterstützt), zum Beispiel: style.getPropertyValue("border-top-color"); Die getPropertyValue()-Methode wird in IE9+ und anderen modernen Browsern in IE6~8 unterstützt, Sie können stattdessen die getAttribute()-Methode verwenden;

2. Das Standard-Pseudoelement ist „display: inline“. Wenn das Anzeigeattribut nicht definiert ist, ist der schließlich erhaltene Breitenwert immer noch „auto“, auch wenn der Breitenattributwert in CSS explizit auf eine feste Größe wie „100 Pixel“ festgelegt ist. Dies liegt daran, dass die Breite und Höhe von Inline-Elementen nicht angepasst werden kann. Die Lösung besteht darin, das Anzeigeattribut des Pseudoelements in „block“, „inline-block“ oder anders zu ändern.

4. Ändern Sie den Stil des Pseudoelements:

Methode 1. Ändern Sie die Klasse, um den Attributwert des Pseudoelements zu ändern: Geben Sie mir ein Beispiel:

Methode 2. Verwenden Sie insertRule von CSSStyleSheet, um den Stil von Pseudoelementen zu ändern:

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

Geben Sie mir ein Beispiel:

Methode 3. Fügen Sie den internen Stil von c9ccee2e6ea535a969eb3f532ad9fe89 in das 93f0f5c25f18dab9d176bd4f6de5d30e ein

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

Oder verwenden Sie 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的现代浏览器

5. Ändern Sie den Inhaltsattributwert des Pseudoelements:

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

Methode 1. Verwenden Sie insertRule von CSSStyleSheet, um den Stil des Pseudoelements zu ändern:

Methode 2. Verwenden Sie das data-*-Attribut des DOM-Elements, um den Wert des Inhalts zu ändern:

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);

六. :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控制伪元素的方法汇总，希望对大家有所帮助！