純粋なJavaScriptで要素のクラスを切り替えるにはどうすればよいですか?


126

このjQueryコード(レスポンシブメニューセクションで使用)を純粋なJavaScriptに変換する方法を探しています。

実装が難しい場合は、他のJavaScriptフレームワークを使用してもかまいません。

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});


11
document.getElementById("menu").classList.toggle("hidden-phone"):-)
ベルギ

一部のブラウザではclassListがサポートされていません:caniuse.com/classlist
Kevin Whitaker

6
@maxさん、もう回答を選びたいですか?
mikemaccana

回答:


211

2014年の回答classList.toggle()標準であり、ほとんどのブラウザーでサポートされています

古いブラウザはclassList.toggle()にuse classlist.jsを使用できます:

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

余談ですが、IDを使用しないでください(IDはグローバルをJS windowオブジェクトにリークします)。


IDを使用できない場合、それをどのように行うのでしょうか。
悟空

ただし、古いIDの代わりに同じクラス数があり、var myList = document.getElementsByClassName( "abc")のようなものを使用しますか?
悟空

1
@gokuクラスは、ウィンドウオブジェクトの下には表示されません。IDのみが行います。2ality.com/2012/08/ids-are-global.htmlを
mikemaccana

1
2番目のパラメータを除いてIE10とIE11でサポート
レーダーの下

1
どうもありがとうございます!現在動作しています:)ループのオプションを追加します。var All = document.querySelectorAll( '。menu'); for(var i = 0; i <All.length; i ++){All [i] .classList.toggle( 'hidden-phone'); }
Blue Tram

11

ここにES6で実装されたソリューションがあります

const toggleClass = (el, className) => el.classList.toggle(className);

使用例

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

3
ES6は優れていますが、このソリューションは、他の既存の回答に従って「document.querySelector」と「element.classList.toggle」を単に使用しています。
mikemaccana 2018

「ベンダー指向」の場合、有効なソリューションはありません。インターネットはオープンスタンダード指向です。
Peter Krauss

これは、多数のファイルに対するソリューションではありません。querySelectorAll(少なくともFFでは)では機能しないので、複数の要素でクラスを切り替えて読みたい人のために:
kev1807

9

この例を見てください:JS Fiddle

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

9
「red」の後に「redOther」という名前のクラスがあるとどうなりますか?
Tiffany Lowe

4

これはIEの以前のバージョンでも動作します。

function toogleClass(ele, class1) {
  var classes = ele.className;
  var regex = new RegExp('\\b' + class1 + '\\b');
  var hasOne = classes.match(regex);
  class1 = class1.replace(/\s+/g, '');
  if (hasOne)
    ele.className = classes.replace(regex, '');
  else
    ele.className = classes + class1;
}
.red {
  background-color: red
}
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}
<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>

<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>


\b単語の境界がcssクラス名のセパレータと一致していません。たとえば、クラス名にダッシュ( "-")文字が含まれている場合は機能しません:btn、btn-redは両方とも一致します'\\b' + 'btn' + '\\b'!!
S.Serpooshan 2019

3

これはおそらくもっと簡潔です:

function toggle(element, klass) {
  var classes = element.className.match(/\S+/g) || [],
      index = classes.indexOf(klass);

  index >= 0 ? classes.splice(index, 1) : classes.push(klass);
  element.className = classes.join(' ');
}

0

これを試してください(うまくいけばうまくいきます):

// mixin (functionality) for toggle class 
function hasClass(ele, clsName) {
    var el = ele.className;
    el = el.split(' ');
    if(el.indexOf(clsName) > -1){
        var cIndex = el.indexOf(clsName);
        el.splice(cIndex, 1);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
    else {
        el.push(clsName);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
}

// get all DOM element that we need for interactivity.

var btnNavbar =  document.getElementsByClassName('btn-navbar')[0];
var containerFluid =  document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');

// on button click job
btnNavbar.addEventListener('click', function(){
    hasClass(containerFluid, 'menu-hidden');
    hasClass(menu, 'hidden-phone');
})`enter code here`

0

classNameでsplit( "")を使用したIE> = 9のコードは次のとおりです。

function toggleClass(element, className) {
    var arrayClass = element.className.split(" ");
    var index = arrayClass.indexOf(className);

    if (index === -1) {
        if (element.className !== "") {
            element.className += ' '
        }
        element.className += className;
    } else {
        arrayClass.splice(index, 1);
        element.className = "";
        for (var i = 0; i < arrayClass.length; i++) {
            element.className += arrayClass[i];
            if (i < arrayClass.length - 1) {
                element.className += " ";
            }
        }
    }
}

0

ネイティブソリューションを使用してクラスを要素に切り替える場合は、この提案を試すことができます。要素に対する他のクラスの有無にかかわらず、さまざまなケースで試してみましたが、かなりうまくいくと思います。

(function(objSelector, objClass){
   document.querySelectorAll(objSelector).forEach(function(o){
      o.addEventListener('click', function(e){
        var $this = e.target,
            klass = $this.className,
            findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g');

        if( !findClass.test( $this.className ) )
            if( klass ) 
                $this.className = klass + ' ' + objClass;
            else 
                $this.setAttribute('class', objClass);
        else 
        {
            klass = klass.replace( findClass, '' );
            if(klass) $this.className = klass;
            else $this.removeAttribute('class');
        }
    });
  });
})('.yourElemetnSelector', 'yourClass');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.