1. ホーム
  2. javascript

[解決済み] jQueryを使わずにJavascriptでクラスを追加・削除する方法

2023-05-29 23:34:36

質問

jQueryを使わずにhtml要素にクラスを追加したり削除したりする、高速で安全な方法を探しています。

また、初期のIE(IE8以上)で動作している必要があります。

どのように解決するのですか?

をサポートしていないブラウザでは、以下の3つの関数が動作します。 classList :

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

https://jaketrent.com/post/addremove-classes-raw-javascript/