【javascript】bodyにidやclassを追加する方法

ワードプレスの固定ページで、キャンペーンページなどを作成していると「このページだけbodyにclassを付けたい！」というような場面があるかと思います。

また、jsのトリガーとしてidやdata属性を付けたい場合もあるでしょう。

そんな時は以下のようなjavascriptで簡単にbodyにidやclass、data属性を追加することができます。

結果の確認方法。

前提として、今回の事例では『domcontentloaded』を使用し、イベント発火のタイミングをHTMLページの読み込みが終わり（DOMツリーの構築が完了した時）としています。

その為『ページのソースを表示』ではidやclassの追加が確認できないと思います。

そのときは『デベロッパーツール』から確認して頂くと、idやclassの追加が確認できると思います。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.classList.add("test");
  });
</script>

上記では「test」というclassを追加しています。

複数追加したいときは以下のようにします。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.classList.add("test", "sample");
  });
</script>

「test」「sample」という2つのclassが追加されます。

idを追加したいときは以下のようにします。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.id = "test";
  });
</script>

尚、基礎的な話になりますが、1つの要素に複数のidを付けることはHTML5ではの文法エラ－となります。

一見、表示に崩れなどが見られなくても、cssが効かなかったり、jsでのエラーの原因になったり、後々のトラブルの原因になりかねないので、複数の指定を付与したい場合はidではなくclassを使いましょう。

インライン要素としてstyleを直接指定したい場合は以下のようにします。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.style.marginBottom='0';
  });
</script>

上記を設定すると、body要素に直接スタイルが挿入され、<body style=”margin-bottom: 0;”>のようになります。

data属性を追加したい場合は以下のようにします。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.dataset.name = 'top';
  });
</script>

上記を設定すると、body要素に『data-name=”top”』が追加されます。

尚、data属性の名前を『data-name』ではなく『data-position-name』のように『-（ハイフン）』で繋ぎたい場合は以下のようにします。

【javascript】
<script>
  window.addEventListener('DOMContentLoaded',function(){
    document.body.dataset.positionName = 'top';
  });
</script>

上記を設定すると、body要素に『data-position-name=”top”』が追加されます。

以上がjavascriptでbodyにidやclassを追加する方法になりますが、いかがでしたでしょうか。

今回のようにbodyそのものに後からidやclassを付与するケースは通常のブログ運営などでは稀なケースかもしれませんが、LPなど特殊なページを作りたくなったときに役に立つと思いますので、知識として頭の片隅に置いておくと良いかもしれません。

この記事がどなたかのお役に立てたら幸いです。