[JavaScript] classList では空白文字を使って複数の class を追加できない。

2022年6月15日

要素にclassを追加したり削除したりするのに,classListが便利である。

しかし,classListが使えないことがある。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script type="text/javascript">

const Element = document.createElement("div");
Element.classList.add("active");
console.log(Element);

</script>
</body>
</html>

例えば,上のようなコードを実行すると,コンソールには div 要素が書かれる。

<div class="active"></div>

しかし,うまくいかない場合がある。

下のようなエラーである。

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('test item') contains HTML space characters, which are not valid in tokens.

エラー内容には ~ (追加するクラス名) contains HTML scape characters ~ とある。

どうやら,要素.classList.add(className) では,空白文字を入れることができないらしい。

Javascript InvalidCharacterError when modifying a css name with a space

Well, class names cannot contain spaces, because the space separates multiple class names from each other. For example, if your HTML contains

class=”zocial button”

it means that this element has two classes, “zocial” and “button”.
If you want to add both of these classes, you have to pass each one as argument to the method:

buttonz[i].classList.add(‘zocial’, ‘button’);

Javascript InvalidCharacterError when modifying a css name with a space

Element.classList」にも下のように書いている。

// 複数のクラスを追加または除去
div.classList.add(“foo”, “bar”, “baz”);
div.classList.remove(“foo”, “bar”, “baz”);

// スプレッド構文を使用したクラスの追加または除去
const cls = [“foo”, “bar”];
div.classList.add(…cls);
div.classList.remove(…cls);

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

というわけで,複数のクラスネームを付与できるが,記述方法は要素.className=クラス名とは違うらしい。

*className = で指定する場合は,空白文字で区切って複数指定できる。

Element.className

let el = document.getElementById(‘item’);

if (el.className === ‘active’){
el.className = ‘inactive’;
} else {
el.className = ‘active’;
}

https://developer.mozilla.org/ja/docs/Web/API/Element/className

以上,備忘録です。


 直近の記事一覧

 迷惑メールの送信元 (24年6月14日)
 MacBookAir所感 (24年4月29日)
 $1499は高い (24年4月28日)
 「サービス維持調整費」 (24年4月23日)

 カテゴリ一覧

 雑談(174)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(37)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(5)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)