jQueryで疑似要素の値を変更する | 電脳備忘録

画像サイズがバラバラなため、読み込んだ画像サイズに応じて疑似要素「after」のwidthとheightを設定する必要に迫られたので対応したときの備忘録。
後から疑似要素を設定する方法については下記のエントリーを参考にさせていただきました。

jQueryでcssの「:before」、「:after」などの疑似要素のstyleを変更させる方法
WEBデザインメモ

今回は画像サイズを取得する必要があったので、読み込み時と画面リサイズ時に画像のサイズを取得し、それをstyleタグに入れ込むようにしました。

具体的には、画像が読み込まれる・画面サイズが変わるたびに、クラス.photoの画像サイズを取得して、クラス.bg-borderの疑似要素に追加設定するといった具合です。

//header内に追加用のstyle photo-adjustをおく
<head>
<style id='photo-adjust' type='text/css'></style>
</head>
<script>
$(window).on('load resize', function(){
var height=$('.photo span img').height();
var width=$('.photo span img').width();
//画像の枠を調整する
$('#photo-adjust').html('.bg-border:after{height:'+ height + 'px; width:'+ width + 'px;}');
});
</script>

Chromeの開発画面で確認すると疑似要素に画像サイズが設定されていていました。

<style id="photo-adjust" type="text/css">.bg-border:after{height:299.562px; width:498px;}</style>

意図したとおりに表示されたのでこれでよしとします。