こんにちは、さち です。
先日、ウェブブラウザーの拡張機能「Tampermonkey」を使って、とあるサイト用の「ユーザースクリプト」を書いていました。
このスクリプトで追加した要素に「CSS」を適用したかったのですが、JavaScript を使って要素に直接 CSS を書き込むのは気が進みません……。
ということで、JavaScript の中で「CSS」をそのまま記述する方法を考えてみます。
JavaScript で CSS を書くのは微妙
サンプルコード
例として、同じ構造でテキストだけが違う <div> を複数追加する「ユーザースクリプト」を書きました。
let list = [1, 2, 3, 4, 5];
let target = document.querySelector('#root');
list.forEach( (val)=> {
let div = document.createElement('div');
div.innerText = val;
//CSS の指定
div.style.display = 'inline-block';
div.style.width = '2em';
div.style.margin = '0 1em';
div.style.border = '2px solid red';
target.append(div);
});
このユーザースクリプトを実行すると、HTML の構造はこんな感じになります。
モヤモヤする点
注目して欲しいのは、「CSS」も JavaScript を使って書いた点です。<div> を作る度に直接「CSS」を指定しています。
「ユーザースクリプト」は他人様のサイトに JavaScript を適用するものなので、CSSファイル を直接いじるのは無理。JavaScript で書くしかありません。
その結果できるのが、この HTML です。
同じ内容の記述（緑色の部分）がいくつもあってゴチャゴチャしています。
そもそも、一番の問題は「CSS」の指定が多いと JavaScript で書くのが面倒ということ。テンション下がりまくりです。
「CSS」をそのまま書きたいからと別途「ユーザーCSS（Stylus 等）」を使うと、ファイルが分かれてしまうので、これもまた管理が面倒なんですよね。
解決方法
改善したコード
「CSS」をそのまま記述したものがこちらです。
let list = [1, 2, 3, 4, 5];
let target = document.querySelector('#root');
list.forEach( (val)=> {
let div = document.createElement('div');
div.innerText = val;
//CSS の指定（【変更】クラスの追加だけ）
div.classList.add('class');
target.append(div);
});
/* 【追加】CSS をそのまま記述 */
let css = `
.class {
display: inline-block;
width: 2em;
margin: 0 1em;
border: 2px solid red;
}`;
let style = document.createElement('style');
style.innerHTML = css;
document.head.append(style);
このユーザースクリプトを実行した結果がこちらです。
やっていること
<div> に「CSS」を指定していた JavaScript はすべて削除して、代わりにクラスを追加する div.classList.add('class'); に置き換えました。「CSS」の指定は、このクラス .class に対して行います。
「CSS」の記述は、'（クォート） で囲む「文字列リテラル」内だと「改行」ができないので、 `（バッククォート） で囲む「テンプレートリテラル」を使います。
記述した「CSS」を <style> タグに入れて、<head> タグ内に追加すれば完成です。
その結果できるのが、この HTML です。
「CSS」は <head> タグ内に追加されるようになったので、<div> タグの記述がとてもスッキリしました。
今回は違いを分かりやすくするため「CSS」の記述を後にしましたが、実際に使うときは CSS の適用に時差がないように先に書いた方が良いかもしれません。
ちなみに、テンプレートリテラル内で ${} と記述すれば、カッコ内で「変数」や「数式」を扱えるので、CSS の値などを可変にできるという副次的効果もあります。
コメント