::afterや::beforeなどの疑似要素はDOMではないため、jQueryで制御できません。
しかし、無理やり変換する方法はあるので、その方法をまとめておきます。
はにわまん疑似要素はjQueryで制御できないのです...><
目次
プロパティを取得して変換するパターン
実際に値を取得するプロセスがあるので、結構好きです。
メイン
※ クリックで変換します
<div class="pseudo">メイン</div>.pseudo::after {
content: '疑似要素';
}var property = window.getComputedStyle($('.pseudo')[0], '::after').getPropertyValue('content');
var sheets = document.styleSheets,
sheet = sheets[sheets.length - 1];
$('.pseudo').hover(function() {
if (sheet.insertRule) { // Webkit
sheet.insertRule('.pseudo::after { content:' + property + '"変更完了" }', sheet.cssRules.length);
}
else if (sheet.addRule) { // IE
sheet.addRule('.pseudo::after', 'content:' + property + '"変更完了"', -1);
}
});参考：http://ithat.me/2016/09/29/js-jquery-pseudo-element-property-get-and-set
変更後の疑似要素のクラスをあらかじめ用意しておくパターン
個人的にはあまり汎用性がないような気もしますが、パターンとして一応…。
メイン
※ クリックで変換します
<div class="pseudo2">メイン2</div>.pseudo2-1::after {
content: '疑似要素2';
}
.pseudo2-2::after {
content: '疑似要素2変更完了';
}$(".pseudo2-1").hover(function() {
// $(this).toggleClass('pseudo2-2');
$(this).addClass('pseudo2-2');
});toggleClassであれば、何回でも切り替え可能。
参考：https://idotdesign.net/blog/web/js/non-dom-before-after/
疑似要素を上書きするパターン
<head>内に同じ疑似要素を追加して、上書きするパターンです。
メイン
※ クリックで変換します
<div class="pseudo3">メイン</div>.pseudo3::after {
content: '疑似要素3';
}var property3 = window.getComputedStyle($('.pseudo3')[0], '::after').getPropertyValue('content');
$(".pseudo3").on("click", function() {
$('head').append('<style>.pseudo3::after { content: ' + property3 + '"変更完了" }</style>');
});疑似要素の値の取得の仕方は、1と同様です。
data属性を使うパターン
シンプルで分かりやすい！data属性使える場面であれば、積極的に使っていきたい。
メイン4
※ クリックで変換します
<div class="pseudo4" data-name="疑似要素4">メイン4</div>.pseudo4::after {
content: attr(data-name);
}$(".pseudo4").on("click", function() {
$(this).attr('data-name', '変更完了');
});参考：http://ithat.me/2015/11/30/jquery-css-pseudo-before-after-change
おわり
疑似要素のCSSの値をJavaScriptで制御する方法でした。
他のやり方も見つかり次第、追記していきます！
