Как переключить класс элемента в чистый JavaScript?

Я ищу способ конвертировать этот код jQuery (который используется в разделе гибкого меню) в чистый JavaScript.Как переключить класс элемента в чистый JavaScript?

Если это сложно реализовать, то можно использовать другие рамки JavaScript.

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

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

заранее спасибо

источник

2013-09-18 max imax

http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – Johan

'document.getElementById (" menu "). ClassList.toggle (" hidden-phone ")' :-) – Bergi

classList не поддерживается некоторыми браузерами: http://caniuse.com/classlist –

Взгляните на этот пример: 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; 
}

источник

2013-09-18 19:56:48

Что делать, если у меня был класс после «красного» с именем «redOther»? –

118

2014 ответ: classList.toggle() is the standard and supported by most browsers.

Старые браузеры могут использовать use classlist.js for classList.toggle():

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

Как и в сторону, вы не должны использовать идентификаторы (they leak globals into the JS window object).

источник

2014-04-16 09:40:33 mikemaccana

если мы не сможем использовать идентификаторы, то как мы это делаем? – Goku

@goku: использование класс. – mikemaccana

, но тогда у нас будет такое же количество классов вместо старых идентификаторов, и используйте что-то вроде var myList = document.getElementsByClassName ("abc")? – Goku

Это, пожалуй, более лаконичным:

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

источник

2015-04-16 17:32:52 mushishi78

Это один работает в более ранних версиях 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>

источник

2016-01-15 17:37:07 RRK

Попробуйте это (надеюсь, он будет работать):

// 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`

источник

2016-11-15 07:51:04

Самый простой нативный метод Element.classList:

<div class="menu" onclick="javascript: this.classList.toggle('hidden-phone');">

источник

2017-02-04 20:56:05

Если вы хотите, чтобы переключить класс к элементу, вы можете попробовать это предложение. Я попробовал его в разных случаях, с или без других классов на элемент, и я думаю, что это работает довольно много:

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

источник

2017-06-26 14:30:10 Christiyan

-1

Вот код для 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 += " "; 
      } 
     } 
    } 
}

источник

2017-07-05 13:21:21

Здесь решение, реализованное с 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

источник

2018-02-23 07:19:21

Как переключить класс элемента в чистый JavaScript?

ответ

Смежные вопросы