wake-up-neo.com

Auswahl und Bearbeitung von CSS-Pseudoelementen wie :: before und :: after mit jQuery

Gibt es eine Möglichkeit, CSS-Pseudoelemente wie ::before und ::after (und die alte Version mit einem Semikolon) mithilfe von jQuery auszuwählen/zu bearbeiten?

Beispielsweise hat mein Stylesheet die folgende Regel:

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

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

javascriptjquerycssjquery-selectorspseudo-element
832
JBradwell

Sie können den Inhalt auch mit einem Datenattribut an das Pseudoelement übergeben und dann mit jQuery Folgendes bearbeiten:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS: 

span:after {
    content: attr(data-content) ' any other text you may want';
}

Wenn Sie verhindern möchten, dass der andere Text angezeigt wird, können Sie dies mit der Lösung von seucolega folgendermaßen kombinieren:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS: 

span.change:after {
    content: attr(data-content) ' any other text you may want';
}
642
Nick Kline

Man könnte meinen, dass dies eine einfache Frage wäre, die alles, was jQuery alles kann, beantworten kann. Leider ist das Problem auf ein technisches Problem zurückzuführen: css: after und: before -Regeln sind nicht Teil des DOM, und kann daher nicht mit den DOM-Methoden von jQuery geändert werden.

Es gibt are Möglichkeiten, diese Elemente mithilfe von JavaScript und/oder CSS-Workarounds zu bearbeiten. Welche Sie verwenden, hängt von Ihren genauen Anforderungen ab.

Ich beginne mit dem allgemein als "besten" Ansatz:

1) Eine vorgegebene Klasse hinzufügen/entfernen

Bei diesem Ansatz haben Sie in Ihrem CSS bereits eine Klasse mit einem anderen :after- oder :before-Stil erstellt. Platzieren Sie diese "neue" Klasse später in Ihrem Stylesheet, um sicherzustellen, dass sie überschrieben wird:

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>

  • Pros: Mit jQuery leicht zu implementieren; ändert schnell mehrere Stile gleichzeitig; erzwingt die Trennung von Bedenken (Isolieren von CSS und JS von Ihrem HTML-Code)
  • Cons: CSS muss vorab geschrieben sein, sodass der Inhalt von :before oder :after nicht vollständig dynamisch ist

2) Fügen Sie neue Styles direkt zum Stylesheet des Dokuments hinzu

Es ist möglich, mithilfe von JavaScript Stile direkt zum Dokumentstilblatt hinzuzufügen, einschließlich :after- und :before-Stile. jQuery bietet keine praktische Verknüpfung, aber zum Glück ist 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 zugehörigen .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. Der erforderliche Code kann jedoch nicht sauberer sein:

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 sich um "Manipulieren" der Werte handelt, nicht nur um sie zu addieren, können wir auch read die vorhandenen :after- oder :before-Stile verwenden.

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>

Bei Verwendung von jQuery können wir document.querySelector('p') durch $('p')[0] ersetzen, um etwas kürzeren Code zu erhalten.

  • Pros: Jede Zeichenfolge kann dynamisch in den Style eingefügt werden
  • Cons: Originalstile werden nicht geändert, sondern nur überschrieben. Durch wiederholte (ab) Verwendung kann das DOM beliebig groß werden

3) Ändern Sie ein anderes DOM-Attribut

Sie können auch verwenden Sie attr() in Ihrem CSS , um ein bestimmtes DOM-Attribut zu lesen. ( Wenn ein Browser :before unterstützt, unterstützt er auch attr(). ) Durch Kombination mit content: in einem sorgfältig vorbereiteten CSS können wir den Inhalt ändern (jedoch keine anderen Eigenschaften wie Rand oder Farbe) von :before und :after dynamisch:

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>

  • Pros: Erstellt keine endlosen zusätzlichen Styles
  • Cons:attr in CSS kann nur auf Inhaltszeichenfolgen angewendet werden, nicht auf URLs oder RGB-Farben
415
Blazemonger

Obwohl sie von Browsern über CSS so dargestellt werden, als wären sie andere echte DOM-Elemente, sind Pseudo-Elemente selbst nicht Teil des DOM, da Pseudo-Elemente, wie der Name schon sagt, keine echten Elemente sind und daher nicht Wählen und bearbeiten Sie sie direkt mit jQuery (oder any JavaScript-APIs für diese Angelegenheit, nicht einmal die Selectors-API ). Dies gilt für alle Pseudoelemente, deren Stile Sie mit einem Skript ändern möchten, und nicht nur ::before und ::after.

Sie können Pseudoelementstile nur zur Laufzeit direkt über das CSSOM (think window.getComputedStyle()) aufrufen, das von jQuery nicht über .css() hinaus verfügbar gemacht wird, eine Methode, die auch keine Pseudoelemente unterstützt.

Sie können jedoch immer andere Wege finden, beispielsweise:

  • Das Anwenden der Stile auf die Pseudoelemente einer oder mehrerer beliebiger Klassen und das Umschalten zwischen Klassen (siehe Antwort von seucolega für ein schnelles Beispiel) - dies ist der idiomatische Weg, da einfache Selektoren (welche Pseudoelemente) verwendet werden sind nicht zwischen Elementen und Elementzuständen zu unterscheiden, wie sie verwendet werden sollen

  • Manipulieren der Stile, die auf die Pseudo-Elemente angewendet werden, durch Ändern des Dokument-Stylesheets, das eher ein Hack ist

152
BoltClock

Sie können in jQuery keine Pseudoelemente auswählen, da sie nicht Teil von DOM sind .. __ Sie können jedoch dem väterlichen Element eine bestimmte Klasse hinzufügen und deren Pseudoelemente in CSS steuern.

BEISPIEL

In jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

In CSS:

span.change:after { content: 'bar' }
75
Gustavo Sousa

In der Linie dessen, was Christian vorschlägt, könnten Sie auch Folgendes tun:

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

So können Sie auf: after und: before Stileigenschaften zugreifen, die in css definiert sind:

// 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');
23
Nedudi

Wir können auch auf benutzerdefinierte Eigenschaften (auch bekannt als CSS-Variablen) setzen, um Pseudo-Elemente zu bearbeiten. Wir können in der Spezifikation lesen dass:

Benutzerdefinierte Eigenschaften sind normale Eigenschaften, daher können sie für .__ deklariert werden. Alle Elemente werden mit der normalen Vererbung und cascade .__ aufgelöst. rules, kann mit @media und anderen bedingten Regeln bedingt gemacht werden, kann im HTML-Stilattribut verwendet werden, gelesen oder mit CSSOM gesetzt werden usw.

In Anbetracht dessen besteht die Idee darin, die benutzerdefinierte Eigenschaft innerhalb des Elements zu definieren, und das Pseudoelement erbt es einfach. so können wir es leicht modifizieren.

Beachten Sie, dass CSS-Variablen möglicherweise nicht in allen Browsern verfügbar sind, die Sie als relevant betrachten (z. B. IE 11): https://caniuse.com/#feat=css-variables

1) Inline-Style verwenden:

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<div class="box"></div>
<div class="box" style="--color:blue"></div>
<div class="box" style="--color:black"></div>
<div class="box" style="--color:#f0f"></div>

2) CSS und Klassen verwenden

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}

.blue {
  --color:blue;
}
.black {
  --color:black;
}
<div class="box"></div>
<div class="box black" ></div>
<div class="box blue"></div>

3) Javascript verwenden

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");
document.querySelectorAll('.box')[1].style.setProperty("--color", "#f0f");
.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

4) Verwenden von jQuery

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
   with older version we can use style attribute to set the value. Simply pay
   attention if you already have inline style defined! 
*/
$('.box').eq(1).attr("style","--color:#f0f");
.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Es kann auch mit komplexen Werten verwendet werden:

.box {
  --c:"content";
  --b:linear-gradient(red,blue);
  --s:20px;
  --p:0 15px;
}

.box:before {
  content: var(--c);
  background:var(--b);
  color:#fff;
  font-size: calc(2 * var(--s) + 5px);
  padding:var(--p);
}
<div class="box"></div>

20
Temani Afif

WENN Sie die :: before oder :: after Sudo-Elemente vollständig über CSS bearbeiten möchten, können Sie es JS machen. Siehe unten;

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

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

Auf diese Weise wird Ihr Element mit Hilfe von JS genau so gestaltet, wie Sie es durch CSS wollen.

11
user595349

Hier ist das HTML:

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

Der berechnete Stil für "Vorher" war content: "VERIFY TO WATCH";

Hier sind meine zwei Zeilen von jQuery, die die Idee verwenden, eine zusätzliche Klasse hinzuzufügen, um spezifisch auf dieses Element zu verweisen, und dann ein Style-Tag (mit einem! Important-Tag) anzufügen, um das CSS des Inhaltswerts des Sudo-Elements zu ändern:

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

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

5
Coyote

Vielen Dank an alle! Ich habe das gemacht, was ich wollte: D http://jsfiddle.net/Tfc9j/42/ Hier sehen Sie

ich wollte, dass die deckkraft eines äußeren div sich von der deckkraft des internen div unterscheidet und diese mit einem klick irgendwohin wechselt;) 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>
4
aimiliano

eine funktionierende, aber nicht sehr effiziente Methode besteht darin, dem Dokument eine Regel mit dem neuen Inhalt hinzuzufügen und mit einer Klasse darauf zu verweisen. Je nach Bedarf benötigt die Klasse für jeden Wert im Inhalt eine eindeutige ID.

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

Dies ist nicht praktikabel, da ich dies nicht für die Verwendung in der realen Welt geschrieben habe, nur um Ihnen ein Beispiel 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>"); 
}
}
}

derzeit fügen Sie ein/oder ein Style-Element hinzu, das die erforderlichen Attribute enthält, die sich auf das Pseudo-Element des Zielelements auswirken.

dies kann als verwendet werden 

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

und 

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

wie nachher: ​​und vorher: Pseudoelemente sind nicht direkt über DOM zugänglich. Derzeit ist es nicht möglich, die Spezifischen Werte der CSS frei zu ändern.

mein Weg war nur ein Beispiel und es ist nicht gut für die Praxis. Sie können ihn modifizieren, einige Ihrer eigenen Tricks ausprobieren und sie für die Verwendung in der realen Welt korrigieren.

also machen Sie Ihr eigenes Experiment mit diesem und anderen!

grüße - Adarsh ​​Hegde. 

3
Adarsh Hegde

Warum sollten Sie Klassen oder Attribute hinzufügen, wenn Sie einfach eine style an head anhängen können

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

Sie können eine gefälschte Eigenschaft erstellen oder eine vorhandene verwenden und erben es im Stylesheet des Pseudoelements.

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 nicht für "content" -Eigenschaft funktioniert :(

2
Alexander Shutov

Es gibt viele Antworten, aber keine Antwort hilft, die CSS von :before oder :after zu manipulieren, nicht einmal die akzeptierte.

So schlage ich es vor. Nehmen wir an, Ihr HTML sieht folgendermaßen aus:

<div id="something">Test</div>

Und dann setzen Sie sein: before in CSS und gestalten es wie folgt:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Bitte beachten Sie, dass ich auch das Attribut content im Element selbst gesetzt habe, so dass Sie es später leicht herausnehmen können ..__ Nun gibt es eine button, auf die Sie klicken, um die Farbe von: before in grün und die Schriftgröße auf 30px zu ändern . Das können Sie wie folgt erreichen:

Definieren Sie eine CSS mit dem erforderlichen Stil für eine Klasse .activeS:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Jetzt können Sie: vor dem Style ändern, indem Sie die Klasse zu Ihrem: before-Element wie folgt hinzufügen:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

Wenn Sie nur den Inhalt von :before abrufen möchten, können Sie Folgendes tun:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

Wenn Sie :before-Inhalt durch jQuery dynamisch ändern möchten, können Sie dies wie folgt erreichen:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

Durch Klicken auf die Schaltfläche "changeBefore" wird der :before-Inhalt von #something in '22' geändert, der ein dynamischer Wert ist.

Ich hoffe, es hilft

1
Learner

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

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

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

oder nutzen Sie ES6 Features:

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

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

Ich habe ein jQuery-Plugin erstellt, um css-pseudo-Regeln hinzuzufügen, z. B. .css() für bestimmte Elemente.

  • plugin-Code und Testfall ist hier
  • anwendungsfall als einfaches CSS-Popup hier

verwendungszweck:

$('body')
  .css({
    backgroundColor: 'white'
  })
  .cssPseudo('after', {
    content: 'attr(title) ", you should try to hover the picture, then click it."',
    position: 'absolute',
    top: 20, left: 20  
  })
  .cssPseudo('hover:after', {
    content: '"Now hover the picture, then click it!"'
  });
0
BananaAcid

Sie können mein Plugin für diesen Zweck verwenden.

JQuery:

(function() {
  $.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      for (var element of parameters.elements.get()) {
        if (!element.pseudoElements) element.pseudoElements = {
          styleSheet: null,
          before: {
            index: null,
            properties: null
          },
          after: {
            index: null,
            properties: null
          },
          id: null
        };

        var selector = (function() {
          if (element.pseudoElements.id !== null) {
            if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
            return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
          } else {
            var id = $.pseudoElements.length;
            $.pseudoElements.length++

              element.pseudoElements.id = id;
            element.setAttribute('data-pe--id', id);

            return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
          };
        })();

        if (!element.pseudoElements.styleSheet) {
          if (document.styleSheets[0]) {
            element.pseudoElements.styleSheet = document.styleSheets[0];
          } else {
            var styleSheet = document.createElement('style');

            document.head.appendChild(styleSheet);
            element.pseudoElements.styleSheet = styleSheet.sheet;
          };
        };

        if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
          element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
        };

        if (typeof parameters.argument === 'object') {
          parameters.argument = $.extend({}, parameters.argument);

          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
          };

          var properties = '';

          for (var property in parameters.argument) {
            if (typeof parameters.argument[property] === 'function')
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
            else
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
          };

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        } else if (parameters.argument !== undefined && parameters.property !== undefined) {
          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = {};
          };

          if (typeof parameters.property === 'function')
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
          else
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

          var properties = '';

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        };
      };

      return $(parameters.elements);
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var element = $(parameters.elements).get(0);

      var windowStyle = window.getComputedStyle(
        element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (element.pseudoElements) {
        return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  $.fn.cssBefore = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
  $.fn.cssAfter = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'after',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  $('.element').cssBefore('content', '"New before!"');
});
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element"></div>

Die Werte sollten wie in der normalen Funktion von jQuery.css angegeben werden

Außerdem können Sie den Wert des Pseudoelement-Parameters wie in der normalen Funktion von jQuery.css abrufen:

console.log( $(element).cssBefore(parameter) );

JS:

(function() {
  document.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        },
        id: null
      };

      var selector = (function() {
        if (parameters.element.pseudoElements.id !== null) {
          if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
          return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
        } else {
          var id = document.pseudoElements.length;
          document.pseudoElements.length++

            parameters.element.pseudoElements.id = id;
          parameters.element.setAttribute('data-pe--id', id);

          return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
        };
      })();

      if (!parameters.element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
        parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        parameters.argument = (function() {
          var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};

          for (var property in parameters.argument) {
            cloneObject[property] = parameters.argument[property];
          };

          return cloneObject;
        })();

        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          if (typeof parameters.argument[property] === 'function')
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
          else
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {
        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
        };

        if (typeof parameters.property === 'function')
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
        else
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

        var properties = '';

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      };
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var windowStyle = window.getComputedStyle(
        parameters.element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (parameters.element.pseudoElements) {
        return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  Object.defineProperty(Element.prototype, 'styleBefore', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'before',
        argument: argument,
        property: property
      });
    }
  });
  Object.defineProperty(Element.prototype, 'styleAfter', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'after',
        argument: argument,
        property: property
      });
    }
  });
})();

document.querySelector('.element').styleBefore('content', '"New before!"');
.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}
<div class="element"></div>

GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

0
Yuri

 $('.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>

0
Tariq Javed

Jemand hat das Anhängen an das head-Element mit einem vollständigen style-Element kommentiert, und das ist nicht schlecht, wenn Sie es nur einmal tun, aber wenn Sie es mehr als einmal zurücksetzen müssen, erhalten Sie eine Menge Style-Elemente. Um dies zu verhindern, habe ich im Kopf ein leeres Stilelement mit einer ID erstellt und die innerHTML davon folgendermaßen ersetzt:

<style id="pseudo"></style>

Dann würde das JavaScript so aussehen: 

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

In meinem Fall brauchte ich dies, um die Höhe eines Vorher-Elements basierend auf der Höhe eines anderen Elements festzulegen, und es ändert sich bei der Größenänderung. Mit diesem Element kann ich setHeight() jedes Mal ausführen, wenn die Größe des Fensters geändert wird, und der <style> wird ordnungsgemäß ersetzt.

Ich hoffe, das hilft jemandem, der versucht hat, dasselbe zu tun.

0
zfb

Ich habe Variablen verwendet, die in :root innerhalb von CSS, um das :after (Gleiches gilt für :before) Pseudo-Element, insbesondere um das background-color Wert für ein gestyltes anchor definiert durch .sliding-middle-out:hover:after und der content Wert für einen anderen anchor (#reference) im folgenden Demo , das mit 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("");
 }
);
0
Riccardo Volpe