スマートフォンの横表示には対応していません

Laboratory

なないろ研究所

⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。

なないろ研究所では日々、様々なことをリサーチし、実験しています。

コミュニケーションの流通をお手伝いするために、日々様々なリサーチを行い、分析し、時に実験しております。

そんな日々の活動内容においてログをつけております。

このような情報共有が、我々が考えるコミュニケーションの一つの形です。

javascriptで疑似要素(::beforeや::after)を操作する

こんにちは、なないろフロントエンドプログラマーの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+"です。'}");
});

私達は京都でNo1のデザイン力・UI力を目指す

システム開発・Web開発カンパニー

株式会社なないろです。

各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。