JavaScriptでDOM生成後に動的に一定量のスタイルシートをCSSの記法で適用する

知見

タイトルわかりづらいシリーズ。

TL;DR

いわゆるdocument.querySelector()したりして、そのDOMに対してelement.styleなりelement.setAttribute したりしてインラインスタイルを当てることはできる。でもこの方法だとJSの記法だしスタイル当てる対象のDOMが多いとめんどくさい。

一定量のまとまったスタイルをJSから動的に差し込んで適用したいときはどうすれば…という気持ちになる。

実際にDOM読み込み後にCSSを適用したいと思ったのだけど、どうすればいいのか一瞬わからなくてググるとCSSOMをいじるタイプのdocument.styleSheetを使うやつが引っかかってくる。

takuya-1st.hatenablog.jp

やってみるとわかるけどCSSStyleSheet.insertRule()使ってチマチマ1スタイルごと足していく感じになる。コレジャナイ。
ただこのCSSOMをいじっていく方法だと足し引きがラクそうではあるので、そういう意味ではこれを使う場面もあるだろうなという気はする(あまり場面が思いつかないけど)

タイトルどおりCSS記法である程度のまとまりのCSSを適用する方法

本題。

なんかこんな感じでやればイケるんじゃないのか、と思ってやってみたらいけた。

めっちゃやりかたはシンプルで、<style>タグを<head>タグ内にぶち込めばよかった。

const customCSSContent = `
      <style>
        .entry-data {
            padding: 15px 10px;
            color: #999;
            /* opacity: 0.1; */
            transition: opacity 0.3s;
        }
        .card:hover .entry-data {
          opacity: 1;
        }

        .entry-data table {
          width: 100%;
        }
        .entry-data tr {
            border-bottom: solid 1px #e6e6e6;
        }
        .entry-data th {
            width: 20%;
            font-weight: normal;
            font-size: 12px;
            white-space: nowrap;
        }
        .entry-data td {
            padding: 8px 0px 8px 10px;
            font-size: 13px;
        }
      </style>
    `;

    // add <style>~~~</style>  to <head>
    document.head.insertAdjacentHTML("beforeend", customCSSContent);

ES2015のテンプレートリテラル使ってスッキリさせている。JS内で<style>タグ含めたHTMLを持って、それを<head>タグ内に挿入したらCSS適用されて助かった。

document.headで<head>タグ取れるので、そこにinsertAdjacentHTMLしている。beforeendでなんとなく末尾へ。

insertAdjacentHTMLについてはこの辺。

qiita.com

乱暴なやりかたかもしれないけど、まあこういう方法もあった、ということで。