suchen

Heim >Web-Frontend >js-Tutorial >So legen Sie JS-Effekte für Vorher- und Nachher-Pseudoelemente fest. Javascript-Fähigkeiten

So legen Sie JS-Effekte für Vorher- und Nachher-Pseudoelemente fest. Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:27:471633Durchsuche

Der Hauptzweck von Cascading Style Sheets (CSS) besteht darin, Stile zu HTML-Elementen hinzuzufügen. In manchen Fällen ist das Hinzufügen zusätzlicher Elemente zum Dokument jedoch überflüssig oder unmöglich. Tatsächlich gibt es in CSS eine Funktion, die es uns ermöglicht, zusätzliche Elemente hinzuzufügen, ohne das Dokument selbst zu stören, bei denen es sich um „Pseudoelemente“ handelt.

Vorherige Wörter

Es ist nicht möglich, js-Effekte für Vor- und Nach-Pseudoelemente direkt festzulegen

Beispiel

Jetzt müssen Sie (:before content is „prefix“, color is red pseudo-class) for (div with id as box and content as „I am test content“) hinzufügen 

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
</head>
<body>
　　<div id="box">我是测试内容</div>　　<script>　　　　var oBox = document.getElementById('box');　　</script>
</body>
</html>

Lösung

[Methode 1] CSS-Stile dynamisch einbetten

Der IE8-Browser behandelt das c9ccee2e6ea535a969eb3f532ad9fe89-Tag als speziellen Knoten und erlaubt keinen Zugriff auf seine untergeordneten Knoten. IE10 – Der Browser unterstützt die Verwendung der styleSheet.cssText-Eigenschaft zum Festlegen von Stilen. Kompatible Schreibmethoden sind wie folgt: 

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
<script>

[Methode 2] Fügen Sie einen Klassennamen mit einer eigenen Pseudoklasse hinzu 

<style>
  .change:before{content: "前缀";color: red;}
</style> 
<script>
  oBox.className = 'change';
</script>

[Nachteil] Diese Methode kann den Wert des Inhaltsattributs im Pseudoelement
nicht steuern

[Methode 3] Verwenden Sie setAttribute, um benutzerdefinierten Inhalt zu implementieren

<style>
　　.change:before{content: attr(data-beforeData);color: red;}
</style> 
<script>
  oBox.setAttribute('data-beforeData','前缀');
</script>

　[Hinweis] Diese Methode kann nur mit setAttribute implementiert werden. Nach dem Testen ist die Datensatzmethode ungültig

【Methode 4】Stylesheet hinzufügen

Der Firefox-Browser unterstützt die Methode addRule() nicht und der IE8-Browser unterstützt die Methode insertRule() nicht. Kompatible Schreibmethoden sind wie folgt: 

<script>
  function insertRule(sheet,ruleKey,ruleValue,index){
  　　return sheet.insertRule &#63; sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
　　} 
  insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)  
</script>

[Nachteile] Diese Methode muss einen internen c9ccee2e6ea535a969eb3f532ad9fe89 haben oder 2cdf5bf648cf2f33323966d7f58a7f3f verwenden, um einen externen Stil zu verknüpfen. Andernfalls ist document.styleSheets eine leere Liste und es wird ein Fehler angezeigt gemeldet

[Methode 5] Ändern Sie das Stylesheet

Verwenden Sie zuerst Methode 4, um ein leeres Stylesheet hinzuzufügen, rufen Sie dann den neu generierten c9ccee2e6ea535a969eb3f532ad9fe89 ab und verwenden Sie dessen innerHTML-Attribut, um das Stylesheet zu ändern 

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString('');
document.head.getElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>

　[Hinweis] Nur die Methode getElementsByTagName('style')[1] kann verwendet werden. Nach dem Testen ist die Methode stylesheets[1] ungültig

DEMO

　39c080a836a35cb97586f6713e8309ca Klicken Sie unten auf den entsprechenden Attributwert, um eine Demonstration durchzuführen

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung der Änderung der Bildschirmausrichtung und des Scrollens in der mobilen JQuery-Seite development_jqueryNächster Artikel：Implementierung der Änderung der Bildschirmausrichtung und des Scrollens in der mobilen JQuery-Seite development_jquery

In Verbindung stehende Artikel

Mehr sehen