Auswahl und Manipulation von CSS-Pseudoelementen wie ::before und ::after unter Verwendung von javascript (oder jQuery)

Question

Gibt es eine Möglichkeit zur Auswahl/Manipulation von CSS-Pseudo-Elementen wie ::before y ::after (und die alte Version mit einem Semikolon) mit jQuery?

Mein Stylesheet hat zum Beispiel die folgende Regel:

.span::after{ content:'foo' }

Wie kann ich "foo" in "bar" mit Vanilla JS oder jQuery ändern?

Answer 1

Hier ist der HTML-Code:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

Der berechnete Stil auf "vorher" war content: "VERIFY TO WATCH";

Hier sind meine zwei Zeilen von jQuery, die die Idee des Hinzufügens einer zusätzlichen Klasse, um speziell auf dieses Element zu verweisen und dann ein Style-Tag (mit einem !important-Tag), um die CSS des sudo-Element der Content-Wert ändert anhängen:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");

Answer 2

Ich füge immer meine eigene utils-Funktion hinzu, die wie folgt aussieht.

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

oder die ES6-Funktionen nutzen:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

Answer 3

Warum Klassen oder Attribute hinzufügen, wenn man einfach eine style zum Kopf

$('head').append('<style>.span:after{ content:'changed content' }</style>')

Answer 4

Dies ist nicht praktisch, da ich es nicht für die reale Welt geschrieben habe, sondern nur um Ihnen ein Beispiel dafür zu geben, was erreicht werden kann.

css = {
before: function(elem,attr){ 

if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
} else {
 $("#cust_style").remove();
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
}

}, after: function(elem,attr){
if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 

} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 
}
}
}

dies fügt derzeit ein / oder ein Style-Element an, das Ihre notwendigen Attribute enthält, die sich auf das Zielelement nach dem Pseudo-Element auswirken werden.

dies kann verwendet werden als

css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

et

css.before( ... ); // to affect the before pseudo element.

Da after: und before: Pseudoelemente nicht direkt über das DOM zugänglich sind, ist es derzeit nicht möglich, die spezifischen Werte des css frei zu bearbeiten.

mein Weg war nur ein Beispiel und ist nicht gut für die Praxis, können Sie es ändern versuchen einige Ihrer eigenen Tricks und machen es richtig für die reale Welt Nutzung.

Experimentieren Sie also selbst mit diesem und anderen Themen!

Grüße - Adarsh Hegde.

Answer 5

Sie können eine gefälschte Eigenschaft erstellen oder eine vorhandene Eigenschaft verwenden und erben im Stylesheet des Pseudo-Elements.

var switched = false;

// Enable color switching
setInterval(function () {
    var color = switched ? 'red' : 'darkred';
    var element = document.getElementById('arrow');
    element.style.backgroundColor = color;

    // Managing pseudo-element's css
    // using inheritance.
    element.style.borderLeftColor = color;

    switched = !switched;
}, 1000);

.arrow {
    /* SET FICTIONAL PROPERTY */
    border-left-color:red;

    background-color:red;
    width:1em;
    height:1em;
    display:inline-block;
    position:relative;
}
.arrow:after {
    border-top:1em solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
    border-left:1em solid transparent;

    /* INHERIT PROPERTY */
    border-left-color:inherit;

    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
    top:-50%;
}

<span id="arrow" class="arrow"></span>

Es scheint, dass es für die Eigenschaft "Inhalt" nicht funktioniert :(