Wie schalte ich die Klasse eines Elements in reinem JavaScript um?

126

Ich suche nach einer Möglichkeit, diesen jQuery-Code (der im Abschnitt "Responsive Menu" verwendet wird) in reines JavaScript zu konvertieren.

Wenn die Implementierung schwierig ist, können andere JavaScript-Frameworks verwendet werden.

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

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});
max imax
quelle
11
document.getElementById("menu").classList.toggle("hidden-phone"):-)
Bergi
classList wird von einigen Browsern nicht unterstützt: caniuse.com/classlist
Kevin Whitaker
6
Hey @max, möchtest du schon eine Antwort auswählen?
Mikemaccana

Antworten:

210

Antwort 2014 : classList.toggle()ist der Standard und wird von den meisten Browsern unterstützt .

Ältere Browser können classlist.js für classList.toggle () verwenden :

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

Abgesehen davon sollten Sie keine IDs verwenden ( sie lecken Globals in das JS- windowObjekt ).

Mikemaccana
quelle
Wenn wir keine IDs verwenden können, wie können wir das dann tun?
Goku
Aber dann haben wir die gleiche Klassenmenge anstelle alter IDs und verwenden so etwas wie var myList = document.getElementsByClassName ("abc")?
Goku
1
@ goku-Klassen werden nicht unter dem Fensterobjekt angezeigt. Nur IDs tun dies. Siehe 2ality.com/2012/08/ids-are-global.html
mikemaccana
1
Unterstützt von IE10 und IE11 mit Ausnahme des zweiten Parameters
Unter dem Radar
1
Ich danke dir sehr! Es funktioniert jetzt :) Ich füge weitere Optionen für die Schleife hinzu: var All = document.querySelectorAll ('. Menu'); for (var i = 0; i <All.length; i ++) {All [i] .classList.toggle ('verstecktes Telefon'); }
Blaue Straßenbahn
11

Hier ist die mit ES6 implementierte Lösung

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

Anwendungsbeispiel

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore
Gor
quelle
3
ES6 ist großartig, aber diese Lösung verwendet einfach 'document.querySelector' und 'element.classList.toggle' für die anderen vorhandenen Antworten.
Mikemaccana
Keine Lösung ist gültig, wenn sie "herstellerorientiert" ist, das Internet ist offen standardorientiert .
Peter Krauss
Dies ist keine Lösung für eine Vielzahl von Dateien. funktioniert nicht mit querySelectorAll (zumindest in FF), also für diejenigen, die Klassen für mehrere Elemente umschalten möchten, lesen Sie weiter :-) (Ich habe zuerst nicht weiter gelesen - daher mein Kommentar!)
kev1807
9

Schauen Sie sich dieses Beispiel an: 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;
}
Eugene Yastrebov
quelle
9
Was wäre, wenn ich eine Klasse nach "rot" mit dem Namen "redOther" hätte?
Tiffany Lowe
4

Dieser funktioniert auch in früheren Versionen von 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>

RRK
quelle
\bDie Wortgrenze stimmt nicht mit den Trennzeichen für CSS-Klassennamen überein. Zum Beispiel funktioniert es nicht, wenn der Klassenname einen Bindestrich ("-") enthält. char: btn, btn-red stimmen beide überein '\\b' + 'btn' + '\\b'!!
Serpooshan
3

Das ist vielleicht prägnanter:

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(' ');
}
Mushishi78
quelle
0

Versuchen Sie dies (hoffentlich wird es funktionieren):

// 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`
Rajbir Sharma
quelle
0

Hier ist ein Code für IE> = 9 unter Verwendung von split ("") für den Klassennamen:

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 += " ";
            }
        }
    }
}
P. Lefèvre
quelle
0

Wenn Sie eine Klasse mit einer nativen Lösung auf ein Element umschalten möchten, können Sie diesen Vorschlag ausprobieren. Ich habe es in verschiedenen Fällen mit oder ohne andere Klassen auf dem Element probiert, und ich denke, es funktioniert ziemlich gut:

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