Kategorie: jQuery

CSS Pseudo-Class :before und :after mit jQuery manipulieren

Das Problem

Frontend-Entwickler nutzen gerne die Pseudo-Klassen :before und :after, um zum Beispiel eine Form mit CSS zu erstellen ohne, dass man dazu ein Hintergrundbild benutzen muss. Beispiel:

.top-header:before {
background: #00589d none repeat scroll 0 0;
height: 61px;
position: absolute;
right: 64px;
top: 0;
transform: skewX(-25deg);
width: 31px;
z-index: 9;
}

Mit diesem Code habe ich ein schräges Rechteck erzeugt. Aufgabe war es, falls sich die Fenstergröße verändert, dann soll sich auch die Position ‚right‘ verschieben. Der neue Wert wird durch jQuery berechnet und in eine Variable gespeichert. Jetzt hatte ich ein Problem, weil man in jQuery keine Pseudoklassen manipulieren kann. Folgendes funktioniert NICHT:

Anfrage