javascript - javascriptを使用してDIVにクラスを追加します

Question

HTMLの例：

<div id="foo" class="class_one"></div>

class_two置き換えずにクラスを追加するにはどうすればよいclass_oneですか？

最終結果：

<div id="foo" class="class_one class_two"></div>

Answer 1

新しいブラウザのみをサポートする必要がある場合は、以下のdeekshithの回答を参照してください。

標準のJavaScript：

document.getElementById('foo').className += ' class_two'

またはJQuery：

$('#foo').addClass('class_two');

Answer 2

jQueryを使用できます。

$('#YourElement').addClass('YourClass'); //add

$('#YourElement').removeClass('YourClass'); //remove

$('#YourElement').toggleClass('YourClass'); //toggle

---

または、必要に応じてJavascript。

document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove

Answer 3

クラスを追加するより良い方法は、Element.classList.add（）を使用することです。

document.getElementById('foo').classList.add("class_two");

Answer 4

いくつかのヘルパー関数を使用すると、作業が楽になります。

function addClass(el, className) {
  var classes = el.className.match(/\S+/g) || [];  

  if (!hasClass(el, className)) {
    classes.push(className);
  }
  el.className = classes.join(' ');
}

function hasClass(el, className) {
  var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
  return re.test(el.className);
}

addClass(document.getElementById('foo'), 'bar')