こんにちは、なないろフロントエンドプログラマーのTです。

javascriptで疑似要素を操作するための関数を作りました。

作成した関数

//javascript
function pseudo(id,css){
    id = id+"-pseudoStyle";
    var element = document.getElementById(id);
    if(element == null){
        styleTag = document.createElement("style");
        styleTag.id = id;
        styleTag.innerHTML = css;
        document.getElementsByTagName("head")[0].appendChild(styleTag);
    }else{
        element.innerHTML = css;
    }
}

使い方

pseudo(ユニークなID[string],CSSの記述[string]);

//javascript
pseudo("sampleBoxBefore","#sampleBox::before{content:'→この文字列はjavascriptで作ったbeforeコンテンツです'}");

使用例

javascriptで取得した値を入れることができます。

//javascript
window.addEventListener("scroll",function(){
    pseudo("sampleBoxBefore2","#sampleBox2::before{content:'→この文字列はjavascriptで作ったbeforeコンテンツです。スクロール量は"+window.pageYOffset+"です。'}");
});