【JavaScript】読み込むCSSファイルを変更しよう!【CSS】

HTML-CSS

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

今回はlinkタグで読み込むCSSファイルを変更する方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • linkタグで読み込むCSSファイルの変更ができる
デバイスによってCSSファイル自体を切り替えたい場合等に活用しよう!

ファイル構成

前提条件として、ファイル構成はこの様になっています。

index.htmlファイルはこうなっています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <!-- リンクタグ -->
    <link id="my-style" rel="stylesheet" href="./CSS/style1.css" />
    <title>Document</title>
  </head>
  <body></body>
</html>

現段階では、style1.cssファイルが読み込まれています。

読み込むCSSファイルを変更しよう

必要な手順は以下のとおりです。

  • idを指定してlinkタグの要素を取得
  • リンク先のパスを変更

idを指定してlinkタグの要素を取得

JavaScriptでHTMLのidタグの要素を取得する記述方法

document.getElementById(id名);

これでJavaScriptからHTMLの要素を操作できるようになりました。

id名は文字列型で指定しよう!

リンク先のパスを変更

パスを変更する記述

要素.href(ファイルのパス)

実際に上書きしてみよう!

// index.html のlinkタグ
/* 
   <link id="my-style" rel="stylesheet" href="./CSS/style1.css" />; 
*/

// linkタグの取得
const styleSheet = document.getElementById("my-style");

// ファイルのリンク先を変更する ※JavaScriptファイルからの相対パスを指定
styleSheet.href = "../CSS/style2.css";

こちらのコードで、読み込むCSSファイルのリンク先が
style2.cssに変更されました。

まとめ

  • document.getElementById(id名); 要素の取得
  • 要素.href(ファイルのパス) 要素のリンク先のパスを上書き

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました