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

In Anlehnung an den Vorschlag von Christian könnten Sie auch Folgendes tun:

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

Answer 2

So greifen Sie auf die in css definierten Stileigenschaften :after und :before zu:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

Answer 3

WENN Sie die ::before- oder ::after-Elemente von sudo vollständig mit CSS manipulieren möchten, können Sie dies mit JS tun. Siehe unten;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

Beachten Sie, wie die <style> Element hat eine ID, die Sie verwenden können, um es zu entfernen und wieder anzuhängen, wenn sich Ihr Stil dynamisch ändert.

Auf diese Weise wird Ihr Element mit Hilfe von JS über CSS genau so gestaltet, wie Sie es wünschen.

Answer 4

Ich danke Ihnen allen! Ich habe es geschafft zu tun, was ich wollte :D http://jsfiddle.net/Tfc9j/42/ Hier ein Blick darauf

Ich wollte, dass die Deckkraft eines äußeren Divs sich von der Deckkraft des internen Divs unterscheidet und sich mit einem Klick irgendwo ändert ;) Danke!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}

<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   

</div>

Answer 5

Ein funktionierender, aber nicht sehr effizienter Weg ist es, dem Dokument eine Regel mit dem neuen Inhalt hinzuzufügen und diese mit einer Klasse zu referenzieren. je nachdem, was benötigt wird, könnte die Klasse eine eindeutige ID für jeden Wert im Inhalt benötigen.

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');