::before, ::after のスタイルを css変数を使って JavaScript で操作する | WordPressのカスタマイズ

いつだったか、すこし前に、JavaScript から ::before や ::after なんかの Pseudo-elements を操作出来ないものかと思い、ネットをうろついたものの、期待した情報には巡り会えなかったのだと記憶してる。
たしか、疑似要素はそもそも DOM として存在していないもの故に、JavaScript からは扱えないとかなんとかではなかったか。その言い方が正しいのかはわからないけれど、基本的には、JavaScript では直接的に疑似要素を操作することはできないということだったと思う。あらかじめスタイルを設定しておいた class を適用するとか、新たにスタイルシートを設定するとかの間接的な方法しかないのだと。

また、新たにサイトを作っているのだけれど、ページの下の方にある背景画像などは、JavaScript で BASE64 でデータ化したものを Ajax でまとめて取得して各要素に適用させるようにしている。リクエストをへらすことと、すぐに表示されない画像は後回しということである。で、その場合に、疑似要素に設定してある画像に対しても、一緒に処理できればいいのだけれど、と、当然のこと思うわけなのである。

で、ふと思いつくこととなる。
そういえば、何かの時に必要になって調べた時に、たしか、CSS変数の値を JavaScript で取得することが出来たっけ、と。取得することができれば、変更することもできるということは当たり前でもなんでもないけれど、もし仮にそれが出来るのであれば・・・、variable だしな～・・・、と。

これ！調べてみると出来るんだな～！
CSS変数の値を JavaScript から変更できるのであれば、その変数によって値が設定されているプロパティは変化させることができるのではないだろうか、と、思うでしょふつ～は。
で、とりあえず、さっそく試してみる。

JavaScript で 疑似要素の背景画像を設定

どういうやりかたが正しいのかはわからないけれど、とりあえず、空の背景画像を CSS変数（カスタムプロパティ）に設定しておいて、それを JavaScript で設定しなおすという具合。
まずは試しにやってみたことなので、onload イベントにて、普通に webp 画像ファイルをロードして CSS変数に設定してみる。ちなみにこれは、このページの下の方にある、コメント欄についている流れ模様の画像である。
それでは、その要素の CSS から。

#respond{/* div id="respond" */
	position:relative;
	--l-img:url();
}

#respond::before{
	content:"";
	display:block;
	position:absolute;
	width:250px;
	height:80px;
	bottom:0px;
	left:0px;
	background:var( --l-img ) no-repeat center / contain;
}

そして、JavaScript の onload イベントにて。
やってることは単純なこと。画像をそれぞれロードして、ターゲットの CSS変数にその画像の url を設定しているだけのこと。
で、結果はというと、なんのエラーが出ることもなく、これにてうまくいった。

window.onload = function() {
    const limg = './stream_flame_l.webp',
        newimg = new Image(),
        respond = document.getElementById( 'respond' ),
        respondstyle = getComputedStyle( respond );

    newimg.onload = () => {

        respond.style.setProperty( '--l-img', 'url(' + limg + ')' );

        const respondval = respondstyle.getPropertyValue( '--l-img' );
        console.log( 'after changed --l-img : ', respondval );
    }
    newimg.src = limg;
}

９行目で値を設定して、１１行目で取得して確認してみると、値はしっかり更新されている。

当然のこと、他のプロパティでも操作できる。border とかでもやってみたが普通に変更できた。
と、いうことでおさらい。
CSS変数に値を設定するのに使うのは、setProperty。例えば要素の ID をつかうなら、

document.getElementById( 'target ID' ).style.setProperty( 'CSS変数名', value );

そして、ただ、CSS変数の値を取得するだけなら、getComputedStyle でターゲットの要素のスタイルを取得して、getPropertyValue を使う。

getComputedStyle( document.getElementById( 'target ID' ) ).getPropertyValue( 'CSS変数名' );

勝手な思い込みか、はたまた勉強不足というか、できないと思っていたことがあらためて出来るということがわかると、とてもうれしい。一つ道がひらけたというか。そしてたぶん、これはよく使うことになるであろうし。