みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験から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フォローしてもらえると嬉しいです🦈