web-dev-qa-db-ja.com

JavaScript CSSで複数のCSSクラスを要素に追加および削除する方法

ライブラリを使用せずに、javascriptを介して複数のcssクラスをhtml要素に割り当てるにはどうすればよいですか？

javascripthtmlcssclassappend
46
anonymous

これを試してみてください...

document.getElementById("MyElement").className += " MyClass";

わかった here ...

48
Ryan

classListを介して複数のクラスを追加する簡単な方法を次に示します（他の回答に記載されているように、すべての最新のブラウザーでサポートされています）。

div.classList.add('foo', 'bar'); // add multiple classes

From： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples

要素に追加するクラス名の配列がある場合は、 ES6 spread operator を使用して、これらをすべてこのワンライナー経由でclassList.add()に渡すことができます。

let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);

すべてのブラウザーがまだES6をネイティブにサポートしているわけではないことに注意してください。そのため、他のES6の回答と同様に、おそらく Babel のようなトランスパイラーを使用するか、ES5に固執して上記の@LayZeeのようなソリューションを使用することになるでしょう。

42
ericsoco

これは動作します：

myElement.className = 'foo bar baz';
28
moff
var el = document.getElementsByClassName('myclass')

el[0].classList.add('newclass');

el[0].classList.remove('newclass');

クラスが存在するかどうかを確認するには、次を使用します。

el[0].classList.contains('newclass'); // this will return true or false

ブラウザサポートIE8 +

12
Mano bharathi

新しいブラウザでの動作が保証されています。古いclassNameの方法は非推奨ですので、そうではありません。

<element class="oneclass" />

element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
8
Tor Valamo

私はどこにもこの答えを見つけることができなかったので：

ES6の方法（最新のブラウザー）

el.classList.add("foo", "bar", "baz");
6
Lemures

これを使うだけ

element.getAttributeNode("class").value += " antherClass";

古いクラスと新しいクラスが混ざらないようにスペースに注意してください

2
Maged Rawash

おそらく：

document.getElementById("myEle").className = "class1 class2";

テストされていませんが、動作するはずです。

2
tarnfeld

さまざまな組み込みメソッドを使用して、同じ方法で複数のクラスを追加および削除できます。

const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');
2
1_bug

最新のブラウザでは、 classList API は サポート です。

これにより、次のような（バニラ）JavaScript関数が可能になります。

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];

        // Loop through the array of classes to add one class at a time
        for (j = 0, lengthJ = classArray.length; j < lengthJ; j += 1) {
            className = classArray[j];

            element.classList.add(className);
        }
    }
};

最新のブラウザ（IEではない）は、classList::add関数に複数の引数を渡すことをサポートします。これにより、ネストされたループの必要性がなくなり、関数が少し簡略化されます。

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var classList, className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];
        classList = element.classList;

        // Pass the array of classes as multiple arguments to classList::add
        classList.add.apply(classList, classArray);
    }
};

使用法

addClasses('.button', ['large', 'primary']);

機能バージョン

var addClassesToElement, addClassesToSelection;

addClassesToElement = function (element, classArray) {
    'use strict';

    classArray.forEach(function (className) {
       element.classList.add(className);
    });
};

addClassesToSelection = function (selector, classArray) {
    'use strict';

    // Use Array::forEach on NodeList to iterate over results.
    // Okay, since we’re not trying to modify the NodeList.
    Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) {
        addClassesToElement(element, classArray)
    });
};

// Usage
addClassesToSelection('.button', ['button', 'button--primary', 'button--large'])

classList::add関数は、以前の回答の一部とは対照的に、同じCSSクラスの複数のインスタンスを防ぎます。

ClassList APIのリソース：

1
Lars Gyrup Brink Nielsen

少なくともいくつかの異なる方法があります。

var buttonTop = document.getElementById("buttonTop");

buttonTop.className = "myElement myButton myStyle";

buttonTop.className = "myElement";

buttonTop.className += " myButton myStyle";

buttonTop.classList.add("myElement");

buttonTop.classList.add("myButton", "myStyle");

buttonTop.setAttribute("class", "myElement");

buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");

buttonTop.classList.remove("myElement", "myButton", "myStyle");
1
theMaxx

これを試して：

function addClass(element, value) {
  if(!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

同様のロジックを使用して、removeClass関数を作成できます。

1
tybro0103

たぶん、これはあなたが学ぶのを助けるでしょう：

//<![CDATA[
/* external.js */
var doc, bod, htm, C, E, addClassName, removeClassName; // for use onload elsewhere
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
addClassName = function(element, className){
  var rx = new RegExp('^(.+\s)*'+className+'(\s.+)*$');
  if(!element.className.match(rx)){
    element.className += ' '+className;
  }
  return element.className;
}
removeClassName = function(element, className){
  element.className = element.className.replace(new RegExp('\s?'+className), '');
  return element.className;
}
var out = E('output'), mn = doc.getElementsByClassName('main')[0];
out.innerHTML = addClassName(mn, 'wow');
out.innerHTML = addClassName(mn, 'cool');
out.innerHTML = addClassName(mn, 'it works');
out.innerHTML = removeClassName(mn, 'wow');
out.innerHTML = removeClassName(mn, 'main');

}); // close load
//]]>
/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='output'></div>
  </div>
</body>
</html>
0
StackSlave