疑似要素のCSSの値(content)をJavaScriptで制御する4パターン

::after::beforeなどの疑似要素はDOMではないため、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で制御する方法でした。

他のやり方も見つかり次第、追記していきます!

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事