JavaScriptでの外部ファイルの読み込み方法【現役エンジニアが解説】
今回は、JavaScriptでの外部ファイルの読み込み方法について、HTMLとJavaScriptそれぞれで読み込む場合に分け、簡単に解説していきます。
HTMLでJavaScriptファイルを読み込む方法
JavaScriptファイルはscriptタグで読み込めます。
この方法はJavaScriptファイルの基本的な読み込み方法になります。
<script src="hoge.js"></script>
上記のコードのように、scriptタグのsrc属性にJavaScriptファイルのパスを指定します。
JavaScriptでJavaScriptファイルを読み込む方法
JavaScriptを使っても外部のJavaScriptファイルを読み込めます。
基本的にはscriptタグで読み込む方法をJavaScript化した方法になります。
var element = document.createElement('script');
element.src = "hoge.js";
document.body.appendChild(element);
上記のコードのように、まずscriptタグを作り、srcプロパティにJavaScriptファイルのパスを指定し、bodyの末尾に追加します。
JavaScriptで外部にあるCSSファイルを読み込む方法
JavaScriptを使えば外部のCSSファイルも読み込むことができます。
JavaScriptファイル同様、CSSファイルもhead内で読み込む方法をJavaScript化した方法になります。
var element = document.createElement('link');
element.href = "hoge.css";
element.rel = 'stylesheet';
element.type = 'text/css';
document.head.appendChild(element);
上記のコードのように、まずlinkタグを作り、hrefプロパティにCSSファイルのパスを指定し、その他のプロパティも設定したうえで、headの末尾に追加します。