web-dev-qa-db-fra.com

Comment basculer la classe d'un élément en JavaScript pur?

Je cherche un moyen de convertir ce code jQuery (qui est utilisé dans la section du menu responsive) en JavaScript pur.

S'il est difficile à mettre en œuvre, vous pouvez utiliser d'autres frameworks JavaScript.

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

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});
javascriptdomtoggle
99
max imax

2014 réponse : classList.toggle() est la norme et est pris en charge par la plupart des navigateurs .

Les navigateurs plus anciens peuvent utiliser tilisez classlist.js pour classList.toggle () :

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

En passant, vous ne devriez pas utiliser d'identifiants ( ils perdent des globales dans l'objet JS window ).

170
mikemaccana

Regardez cet exemple: 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;
}
10
Eugene Yastrebov

Voici la solution mise en œuvre avec ES6

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

exemple d'utilisation

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

Celui-ci fonctionne également dans les versions précédentes de 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>
4
RRK

C'est peut-être plus succinct:

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(' ');
}
3
mushishi78

Essayez ceci (espérons que cela fonctionnera):

// 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
Rajbir Sharma

Si vous souhaitez basculer une classe en élément à l'aide d'une solution native, essayez cette suggestion. Je l'ai goûté dans différents cas, avec ou sans autres classes sur l'élément, et je pense que cela fonctionne assez bien:

(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');
0
Christiyan