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?
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';
}
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:
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>
:before
oder :after
nicht vollständig dynamisch istEs 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.
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>
attr
in CSS kann nur auf Inhaltszeichenfolgen angewendet werden, nicht auf URLs oder RGB-FarbenObwohl 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
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.
In jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
In CSS:
span.change:after { content: 'bar' }
In der Linie dessen, was Christian vorschlägt, könnten Sie auch Folgendes tun:
$('head').append("<style>.span::after{ content:'bar' }</style>");
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');
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>
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.
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>");
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>
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');
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.
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>')
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 :(
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
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!');
Ich habe ein jQuery-Plugin erstellt, um css-pseudo-Regeln hinzuzufügen, z. B. .css()
für bestimmte Elemente.
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!"'
});
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/
$('.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>
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.
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("");
}
);