[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

以上，備忘録です。

新しい記事へ古い記事へ

記事一覧へ