Câu hỏi Làm cách nào để chuyển đổi lớp của phần tử thành JavaScript thuần túy?


Tôi đang tìm một cách để chuyển đổi mã jQuery này (được sử dụng trong phần menu đáp ứng) thành JavaScript thuần túy.

Nếu khó thực hiện, bạn có thể sử dụng các khung công tác JavaScript khác.

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

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

cảm ơn trước


76
2017-09-18 19:39


gốc


stackoverflow.com/questions/195951/… - Johan
document.getElementById("menu").classList.toggle("hidden-phone") :-) - Bergi
classList không được hỗ trợ bởi một số trình duyệt: caniuse.com/classlist - Kevin Whitaker
Hey @max, muốn chọn câu trả lời rồi? - mikemaccana


Các câu trả lời:


Câu trả lời năm 2014: classList.toggle() là tiêu chuẩn và được hỗ trợ bởi hầu hết các trình duyệt.

Các trình duyệt cũ hơn có thể sử dụng sử dụng classlist.js cho classList.toggle ():

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

Ngoài ra, bạn không nên sử dụng ID (họ rò rỉ globals vào JS window vật).


133
2018-04-16 09:40



nếu chúng ta không thể sử dụng ID, thì làm thế nào ca chúng ta làm điều đó? - Goku
@goku: sử dụng một lớp học. - mikemaccana
nhưng, sau đó chúng tôi sẽ có cùng một số lượng các lớp thay vì ID cũ, và sử dụng một cái gì đó như var myList = document.getElementsByClassName ("abc")? - Goku
Các lớp @goku không xuất hiện bên dưới đối tượng cửa sổ. Chỉ có ID. Xem 2ality.com/2012/08/ids-are-global.html - mikemaccana
Được hỗ trợ bởi IE10 và IE11 ngoại trừ tham số thứ hai - Below the Radar


Phương pháp gốc đơn giản nhất là Element.classList:

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

15
2018-02-04 20:56





Hãy xem ví dụ này: 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
2017-09-18 19:56



Nếu tôi có một lớp học sau khi "đỏ" có tên "redOther" thì sao? - Tiffany Lowe


Điều này làm việc trong các phiên bản trước của 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>


3
2018-01-15 17:37





Điều này có lẽ ngắn gọn hơn:

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

2
2018-04-16 17:32





Đây là giải pháp được triển khai với ES6

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

ví dụ sử dụng

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

1
2018-02-23 07:19





Hãy thử điều này (hy vọng nó sẽ hoạt động):

// 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
2017-11-15 07:51