Sie würden denken, dies wäre eine einfach zu beantwortende Frage, mit allem anderen, was jQuery tun kann. Leider ist das Problem auf ein technisches Problem zurückzuführen: css: after und: before-Regeln sind nicht Teil des DOM und können daher nicht mit den DOM-Methoden von jQuery geändert werden.
Es gibt Möglichkeiten, diese Elemente mithilfe von JavaScript- und / oder CSS-Problemumgehungen zu bearbeiten. Welches Sie verwenden, hängt von Ihren genauen Anforderungen ab.
Ich werde mit dem beginnen, was allgemein als der "beste" Ansatz angesehen wird:
1) Hinzufügen / Entfernen einer vorgegebenen Klasse
Bei diesem Ansatz haben Sie bereits eine Klasse in Ihrem CSS mit einem anderen erstellt :afteroder :beforeStil. Platzieren Sie diese "neue" Klasse später in Ihrem Stylesheet, um sicherzustellen, dass sie überschreibt:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Dann können Sie diese Klasse einfach mit jQuery (oder Vanilla JavaScript) hinzufügen oder entfernen:
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Vorteile: Einfache Implementierung mit jQuery; ändert schnell mehrere Stile gleichzeitig; Erzwingt die Trennung von Bedenken (Isolieren von CSS und JS von HTML)
- Nachteile: CSS muss vorab geschrieben sein, damit der Inhalt von
:beforeoder :afternicht vollständig dynamisch ist
2) Fügen Sie neue Stile direkt zum Stylesheet des Dokuments hinzu
Es ist möglich, JavaScript zu verwenden, um Stile direkt zum Dokument-Stylesheet hinzuzufügen, einschließlich :afterund :beforeStile. jQuery bietet keine praktische Verknüpfung, aber zum Glück ist das JS nicht so kompliziert:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()und die damit verbundenen .insertRule()Methoden werden heute ziemlich gut unterstützt.
Als Variation können Sie auch jQuery verwenden, um dem Dokument ein völlig neues Stylesheet hinzuzufügen, aber der erforderliche Code ist nicht sauberer:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Wenn es darum geht, die Werte zu "manipulieren" und nicht nur zu ergänzen, können wir auch die vorhandenen oder Stile mit einem anderen Ansatz lesen:after:before :
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
Wir können ersetzen document.querySelector('p')mit $('p')[0]bei der Verwendung von jQuery, für etwas kürzer Code.
- Vorteile: Jede Zeichenfolge kann dynamisch in den Stil eingefügt werden
- Nachteile: Originalstile werden nicht geändert, sondern nur überschrieben. Wiederholte (ab) Verwendung kann das DOM beliebig groß werden lassen
3) Ändern Sie ein anderes DOM-Attribut
Sie können auch verwenden attr()in Ihrem CSS ein bestimmtes DOM - Attribut zu lesen. ( Wenn ein Browser dies unterstützt :before, unterstützt er dies attr()auch. ) Durch die Kombination mit content:einem sorgfältig vorbereiteten CSS können wir den Inhalt (aber nicht andere Eigenschaften wie Rand oder Farbe) von :beforeund :afterdynamisch ändern :
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Dies kann mit der zweiten Technik kombiniert werden, wenn das CSS nicht im Voraus vorbereitet werden kann:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- Vorteile: Erstellt keine endlosen zusätzlichen Stile
- Nachteile:
attr In CSS kann nur auf Inhaltszeichenfolgen angewendet werden, nicht auf URLs oder RGB-Farben