【JavaScript】 「ユーザースクリプト」内で「CSS」をそのまま書きたい

この記事は約4分で読めます。

コーディングのイメージ

こんにちは、さち です。

先日、ウェブブラウザーの拡張機能「Tampermonkey」を使って、とあるサイト用の「ユーザースクリプト」を書いていました。

このスクリプトで追加した要素に「CSS」を適用したかったのですが、JavaScript で書くのは面倒ですし、 できあがる HTML の構造も微妙です……。

ということで、JavaScript の中で「CSS」をそのまま記述する方法を考えてみます。

スポンサーリンク

JavaScript で CSS を書くのは微妙

サンプルコード

例として、同じ構造でテキストだけが違う <div> を複数追加する「ユーザースクリプト」を書きました。

let list = [1, 2, 3, 4, 5];
let target = document.querySelector('#root');
let div;

list.forEach( (val)=> {
  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 の構造はこんな感じになります。

HTMLの構造

モヤモヤする点

注目して欲しいのは、「CSS」も JavaScript を使って書いたです。<div> を作る度に直接「CSS」を指定しています。

「ユーザースクリプト」は人様のサイトに JavaScript を適用するものなので、CSSファイル を直接いじるのは無理。JavaScript で書くしかありません。

その結果できるのが、この HTML です。

HTMLの構造

同じ内容の記述(緑色の部分)がいくつもあってゴチャゴチャしています。

そもそも、一番の問題は「CSS」の指定が多いと JavaScript で書くのが面倒ということ。テンション下がりまくりです。

「CSS」をそのまま書きたいからと別途「ユーザーCSS(Stylus 等)」を使うと、ファイルが分かれてしまうので、これもまた管理が面倒なんですよね。

解決方法

改善したコード

「CSS」をそのまま記述したものがこちらです。

let list = [1, 2, 3, 4, 5];
let target = document.querySelector('#root');
let div;

list.forEach( (val)=> {
  div = document.createElement('div');
  div.innerText = val;

  //クラスの指定だけする
  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);

このユーザースクリプトを実行した結果がこちらです。

HTMLの構造

やっていること

<div> に「CSS」を指定していた JavaScript はすべて削除して、代わりにクラスを追加する  div.classList.add('class'); に置き換えました。「CSS」の指定は、このクラス .class に対して行います。

「CSS」の記述は、'(クォート) で囲む「文字列リテラル」内だと「改行」ができないので、 `(バッククォート) で囲む「テンプレートリテラル」を使います

記述した「CSS」を <style> タグに入れて、<hrad> タグ内に追加すれば完成です。

その結果できるのが、この HTML です。

HTMLの構造

「CSS」は <head> タグ内に追加されるようになったので、<div> タグの記述がとてもスッキリしました。

今回は違いを分かりやすくするため「CSS」の記述を後にしましたが、実際に使うときは CSS の適用に時差がないように先に書いた方が良いかもしれません。

ちなみに、テンプレートリテラル内で ${} と記述すれば、カッコ内で「変数」や「数式」を扱えるので、CSS の値などを簡単に可変にできる副次的効果もあります。

コメント

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