CSSを、必要に応じて動的に読み込みたいことは、たまにあります。たとえば、ページの色のセットをまとめて変えるなどです。そうした時の処理をまとめた関数です。
やっていることは簡単なので、直接コードを書いてもよいと思います。
ファイル構成は以下の通りです。>>ダウンロード
※ 初期化用関数「init」の処理については「Webブラウザ/Node.js 互換関数」をご覧下さい。Node.js用の処理は、今回のコードにはありません。
サンプル動作
sample/loadCSS.js
'use strict';
(function() {
const _t = init('com.crocro.util');
// loadCSS | CSSの動的読み込み
_t.loadCSS = function(url) {
// styleの作成
const $style = $('<link rel="stylesheet">').attr('href', url);
// headの末尾に追加
$('head link:last').after($style);
};
// 初期化用関数
function init(p) {
return ((o, p) => {
p.split('.').forEach(k => o = o[k]||(o[k]={}));
return o})(window, p);
};
})();解説
「style」要素を作成して、「href」にCSSのURLを指定します。絶対パスでも相対パスでも構いません。
次に、「head」タグ配下の「link」タグの末尾に、作成した「style」要素を挿入します。こうすることで、そのCSSが読み込まれて、現在のWebページに反映されます。
loadCSS｜CSSの動的読み込み
引数に指定したCSSを動的に読み込みます。@param {String} url - CSSのURLを絶対パス、あるいは相対パスで書きます。
サンプル
const loadCSS = com.crocro.util.loadCSS;
loadCSS('sub.css');sample/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CSSの動的読み込み - JavaScript実用サンプルコード解説付き</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="loadCSS.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<textarea id="src"></textarea>
<button id="exec">実行</button>
<button id="reload">リロード</button>
</body>
</html>sample/main.js
'use strict';
$(function() {
// 変数の初期化
const $src = $('#src');
const $exec = $('#exec');
const $reload = $('#reload');
// 値のセット
$src.val(String.raw`
const loadCSS = com.crocro.util.loadCSS;
loadCSS('sub.css');
`.trim());
// クリック時の処理
$exec.click(() => {
eval($src.val());
});
$reload.click(() => {
location.reload();
});
});sample/main.css
html,
body {
margin: 0;
padding: 0;
}
textarea,
button {
box-sizing: border-box;
width: 100%;
vertical-align:bottom;
}
textarea {
height: 5em;
}sample/sub.css
textarea {
background-color: #000;
color: #fff;
}記事一覧
アプリやゲーム用の処理
Webページの便利処理
紹介
Steamでゲームをリリースした時の経験をマニュアル的にまとめた本です。
8bit風RTS「TinyWar」のアルゴリズムを、コード付きで解説した本です。
JavaScriptから手軽に扱える形態素解析器『kuromoji.js』を使い、日本語を分解して遊ぶ本です。
node.jsを使い、「Google Chrome」のユーザーデータを、自動処理でメンテナンスするプログラムを開発する本です。
HTML5でローカルアプリが作れるNW.jsで、同人ゲームを作るための基礎知識の本です。
シミュレーションRPG「TinySRPG」のアルゴリズムを、コード付きで解説した本です。
JavaScriptの実行時エラーを分類して、ワンライナーのソースコードとエラーメッセージを収録した本です。
禁止文字つきコードゴルフを1年以上出題して、その解答ノウハウをまとめた本です。
2011年の春ごろに、Javaで「NyARToolKit」互換のARマーカー認識プログラムを書いた時のレポートです。