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

Ich habe die Variablen verwendet, die in :root innerhalb CSS zur Änderung der :after (Gleiches gilt für :before ) Pseudo-Element zu ändern, insbesondere um die background-color Wert für eine gestylte anchor definiert durch .sliding-middle-out:hover:after und die content Wert für einen anderen anchor ( #reference ) im Folgenden Demo die mit Hilfe von JavaScript/jQuery zufällige Farben erzeugt:

HTML

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
  <a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

CSS

:root {
    --anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: var(--anchorsFg);
    outline: 0;
    font-style: italic;

    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -ms-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background-color: transparent;

    -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background-color: var(--anchorsFg);
    outline: 0;
}
#reference {
  margin-top: 20px;
}
.sliding-middle-out:before {
  content: attr(data-content);
  display: attr(data-display);
}

JS/jQuery

var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
    $( ":root" ).css({"--anchorsFg" : anchorsFg});
});

$( "#reference" ).hover(
 function(){
    $(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
 },
 function(){
    $(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
 }
);

Answer 2

 $('.span').attr('data-txt', 'foo');
        $('.span').click(function () {
         $(this).attr('data-txt',"any other text");
        })

.span{
}
.span:after{ 
  content: attr(data-txt);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>

Answer 3

Es ist das erste Mal, dass ich nicht alle gegebenen Antworten lese, bevor ich meine eigene gebe, also hoffe ich, dass mich das nicht in den Hintern beißt ...

In meinem Fall wurde dies für Icons benötigt, die an a , div y button Elemente, die ein wenig anders funktionieren als die <i class="icon-class"></i> denn es gab keine icon-class Klasse auf sie. Hinzufügen von class="icon-class" Allerdings ist das Styling kaputt.

Stattdessen habe ich eine data-icon Attribut mit dem Wert, der eigentlich in element::before { content: "HERE" } und dieses recht einfache JavaScript erledigte den Rest.

    {
        const fakeIcons = document.querySelectorAll('[data-icon]')

        for (const iconElement of fakeIcons) {

            const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
            const beforeContent = iconElement.getAttribute('data-icon')

            iconElement.classList.add(fakeClass)

            const style = document.createElement('style')
            style.type = 'text/css'
            style.innerHTML = `

                .${fakeClass}::before {
                    content: "${beforeContent}" !important;
                }

            `
            document.getElementsByTagName('head')[0].appendChild(style)
        }
    }

Code erklärt:

• alle Elemente mit dem angegebenen Attribut auswählen ( data-icon )
• Schleife durch sie
• zufällig einen Klassennamen erzeugen, der mit fake- , gefolgt von einer zufälligen alphanumerischen Zeichenfolge
• erhalten. data-icon der Wert des Attributs
• zufällig generierte Klasse zum Element hinzufügen
• Stil schaffen für ::before Pseudo-Element, das den Inhalt auf den zuvor abgerufenen Wert setzt
• Styling am Ende von <head> HTML-Element

Answer 4

Ich habe etwas anderes für Sie, das einfach und effektiv ist.

    <style> 
    .case-after:after { // set your properties here like eg: 
        color:#3fd309 !important; 
     } 
     .case-before:before { // set your properties here like eg: 
        color:#151715 !important; 
     }
 </style>
  // case for after
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-after');
    });

     // case for before
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-before');
    });

Answer 5

Setzen Sie einfach die Pseudo vor o nach einen Stil von inherit haben, dann setzen Sie den übergeordneten Stil mit javascript.

Ich möchte also zum Beispiel die Farbstil des :vorher, dann setze ich die:

.my-style::before{
color: inherit;
}

Dann ändere ich einfach die Farbstil über die .mein-Stil Element mit javascript:

document.querySelector(".my-style").style.color = red;

Job erledigt, super einfach