Vous penseriez que ce serait une question simple à répondre, avec tout le reste que jQuery peut faire. Malheureusement, le problème se résume à un problème technique: les règles css: after et: before ne font pas partie du DOM et ne peuvent donc pas être modifiées à l'aide des méthodes DOM de jQuery.
Il existe des moyens de manipuler ces éléments à l'aide de solutions de contournement JavaScript et / ou CSS; lequel vous utilisez dépend de vos besoins exacts.
Je vais commencer par ce qui est largement considéré comme la "meilleure" approche:
1) Ajouter / supprimer une classe prédéterminée
Dans cette approche, vous avez déjà créé une classe dans votre CSS avec un autre :afterou de :beforestyle. Placez cette "nouvelle" classe plus tard dans votre feuille de style pour vous assurer qu'elle remplace:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
Ensuite, vous pouvez facilement ajouter ou supprimer cette classe en utilisant jQuery (ou JavaScript vanilla):
$('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>
- Avantages: Facile à implémenter avec jQuery; modifie rapidement plusieurs styles à la fois; impose la séparation des préoccupations (isoler votre CSS et JS de votre HTML)
- Inconvénients: CSS doit être pré-écrit, donc le contenu de
:beforeou :aftern'est pas complètement dynamique
2) Ajoutez de nouveaux styles directement à la feuille de style du document
Il est possible d'utiliser JavaScript pour ajouter des styles directement à la feuille de style du document, y compris les styles :afteret :before. jQuery ne fournit pas de raccourci pratique, mais heureusement, le JS n'est pas si compliqué:
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()et les .insertRule()méthodes associées sont assez bien supportées aujourd'hui.
En variante, vous pouvez également utiliser jQuery pour ajouter une nouvelle feuille de style au document, mais le code nécessaire n'est pas plus propre:
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>
Si nous parlons de "manipuler" les valeurs, pas seulement de les ajouter, nous pouvons également lire les styles existants :afterou en:before utilisant une approche différente:
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>
Nous pouvons remplacer document.querySelector('p')par $('p')[0]lors de l'utilisation de jQuery, pour un code légèrement plus court.
- Avantages: n'importe quelle chaîne peut être insérée dynamiquement dans le style
- Inconvénients: les styles originaux ne sont pas modifiés, juste remplacés; l'utilisation répétée (ab) peut faire augmenter arbitrairement le DOM
3) Modifier un attribut DOM différent
Vous pouvez également utiliser attr()dans votre CSS pour lire un attribut DOM particulier. ( Si un navigateur prend en charge :before, il le prend attr()également en charge . ) En combinant cela avec content:du CSS soigneusement préparé, nous pouvons changer le contenu (mais pas d'autres propriétés, comme la marge ou la couleur) :beforeet :afterdynamiquement:
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>
Cela peut être combiné avec la deuxième technique si le CSS ne peut pas être préparé à l'avance:
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>
- Avantages: ne crée pas de styles supplémentaires sans fin
- Inconvénients:
attr en CSS ne peut s'appliquer qu'aux chaînes de contenu, pas aux URL ou aux couleurs RVB