web-dev-qa-db-ja.com

特定の要素にクラスを追加する方法

私はすでにクラスを持っている要素があります。

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

今度はクラスをdivに追加するJavaScript関数を作成したいと思います（置き換えではなく追加します）。

どうやってやるの？

javascriptdom-manipulation
1030
Blankman

要素のclassNameプロパティにスペースと新しいクラスの名前を追加します。まず、参照を取得しやすいように、要素にidを付けます。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

それから

var d = document.getElementById("div1");
d.className += " otherclass";

MDNの element.classNameも参照してください 。

1743
Ishmael

フレームワークなしでこれを行う最も簡単な方法は、 element.classList.add methodを使用することです。

var element = document.getElementById("div1");
element.classList.add("otherclass");

編集： そして、要素からクラスを削除したい場合 - 

element.classList.remove("otherclass");

私は空のスペースを追加したり、自分自身でエントリ処理を重複したりする必要はありません（これはdocument.classNameアプローチを使用するときに必要です）。 ブラウザの制限 /がありますが、 polyfills を使用することで回避できます。

1195
Yuri

目的の要素 "d"を見つけます。

d.className += ' additionalClass'; //note the space

これをもっと賢い方法でラップして、存在を確認し、スペース所要量などを確認することができます。

173
annakata

クラスを追加

  • クロス互換

    次の例では、classnameを<body>要素に追加します。これはIE-8互換です。

    var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

    これは次のものの省略形です。

    var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

  • パフォーマンス

    相互互換性よりもパフォーマンスを重視する場合は、4％速くなる次のように短くすることができます。

    var z = document.body;
document.body.classList.add('wait');

  • 便利さ

    あるいは、jQueryを使用することもできますが、結果として得られるパフォーマンスはかなり遅くなります。 jsPerfによると94％遅くなります

    $('body').addClass('wait');

クラスを削除する

  • パフォーマンス

    JQueryを選択的に使用することは、パフォーマンスに関心がある場合にクラスを削除するための最良の方法です

    var a = document.body, c = ' classname';
$(a).removeClass(c);

  • JQueryがないと32％遅くなります

    var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

参考文献

  1. jsPerfテストケース：クラスの追加
  2. jsPerfテストケース：クラスの削除

プロトタイプの使用

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

YUIを使う

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
124
davidcondrey

純粋なJavaScriptを使用して要素にクラスを追加するもう1つの方法

クラスを追加するために： 

document.getElementById("div1").classList.add("classToBeAdded");

クラスを削除するには： 

document.getElementById("div1").classList.remove("classToBeRemoved");
32
Shoaib Chikate

私がしている作業がライブラリの使用を保証していない場合は、次の2つの機能を使用します。

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}
21
meouw

このクラスを1つ追加するだけでは不十分であると仮定して（たとえば、非同期要求などが続いているなど）、 Prototype または jQuery のようなライブラリをお勧めします。

これはあなたが（これを含む）あなたがする必要があるすべてについてちょうど非常に簡単になります。

それで、あなたが今あなたのページにjQueryを持っているとしましょう、あなたは要素にクラス名を追加するためにこのようなコードを使うことができます（この場合、ロード時）：

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

jQuery APIブラウザ をチェックしてください。

18
rfunduk

ClassList.add OR classList.removeメソッドを使用して、要素にクラスを追加または削除できます。

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上記のコードはnameElemにクラス "anyclass"を追加します（そして置き換えません）。同様に、classList.remove（）メソッドを使ってクラスを削除することができます。

nameElem.classList.remove("anyclss")
13
sjv

要素にクラスを追加するには

既存の値を削除したり影響を与えたりせずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。

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

要素のすべてのクラスを変更するには

既存のすべてのクラスを1つ以上の新しいクラスで置き換えるには、className属性を設定します。

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

（スペース区切りのリストを使用して複数のクラスを適用できます。）

9
Mo.

あなたがjQueryを使いたくない、そしてもっと古いブラウザをサポートしたいのなら：

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
5
Ferran Maylinch

私はIE9が正式にシャットダウンされていることを知っていて、上で述べたようにelement.classListでそれを達成することができますが、classListname__なしでどのように動作するかを学ぶことを試みました。

以下のコードは上記の多くの答えを拡張し、重複するクラスを追加しないことでそれらを改善します。

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
4
Yuvaraj

私も最速の方法はes5：document.querySelector(".my.super-class").classList.add('new-class')のようにElement.prototype.classListを使うことだと思いますが、ie8ではElement.prototype.classListのようなものはありません。それ）：

if(Element.prototype.classList === void 0){
        function DOMTokenList(classes, self){
                typeof classes == "string" && (classes = classes.split(' '))
                while(this.length){
                        Array.prototype.pop.apply(this);
                }
                Array.prototype.Push.apply(this, classes);
                this.__self__ = this.__self__ || self
        }

        DOMTokenList.prototype.item = function (index){
                return this[index];
        }

        DOMTokenList.prototype.contains = function (myClass){
                for(var i = this.length - 1; i >= 0 ; i--){
                        if(this[i] === myClass){
                                return true;
                        }
                }
                return false
        }

        DOMTokenList.prototype.add = function (newClass){
                if(this.contains(newClass)){
                        return;
                }
                this.__self__.className += (this.__self__.className?" ":"")+newClass;
                DOMTokenList.call(this, this.__self__.className)
        }

        DOMTokenList.prototype.remove = function (oldClass){
                if(!this.contains(newClass)){
                        return;
                }
                this[this.indexOf(oldClass)] = undefined
                this.__self__.className = this.join(' ').replace(/  +/, ' ')
                DOMTokenList.call(this, this.__self__.className)
        }

        DOMTokenList.prototype.toggle = function (aClass){
                this[this.contains(aClass)? 'remove' : 'add'](aClass)
                return this.contains(aClass);
        }

        DOMTokenList.prototype.replace = function (oldClass, newClass){
                this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
        }

        Object.defineProperty(Element.prototype, 'classList', {
                get: function() {
                        return new DOMTokenList( this.className, this );
                },
                enumerable: false
        })
}
3
asdru

簡単な方法で要素クラスを追加、削除、またはチェックするには：

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
3
Marcos Fernandez Ramos

他の人が言ったことを詳しく説明するために、複数のCSSクラスがスペースで区切られた単一の文字列に結合されています。したがって、ハードコーディングしたい場合は、単純に次のようになります。

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

そこから、新しいクラスを追加するのに必要なJavaScriptを簡単に派生させることができます。要素のclassNameプロパティに新しいクラスが続くスペースを追加するだけです。これを知っていれば、後で必要になったときにクラスを削除する関数を書くこともできます。

3
Misko

私たちはブラウザのDOM上で走らせることができる純粋なJavaScriptを使うほうが良いと思います。

機能的な使い方は次のとおりです。私はES6を使用しましたが、ES5と関数式または関数定義のどちらを使用しても構いません。

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.Push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}
2
bvmCoder

あなたはjQueryに似た現代的なアプローチを使うことができます

最初にJSがDOMで見つける要素を1つだけ変更する必要がある場合は、これを使用できます。

document.querySelector('.someclass').className += " red";
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

1つのスペースbefore class nameを残すことを忘れないでください。

新しいクラスを追加したい場所が複数ある場合は、このように使用できます。

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>
2
Vladimir Jovanović

純粋なJSを使ったサンプル。最初の例では、要素のIDを取得して追加します。 2クラス.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

2番目の例では、要素のクラス名を取得してもう1つ追加します。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
1
Vasyl Gutnyk

Lodash を使用していてclassName文字列を更新したい場合は、

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
0
S.D.