回答:
element.classList.addを使用してクラスを追加します。
element.classList.add("my-class");そしてelement.classList.removeでクラスを削除します：
element.classList.remove("my-class");className要素のプロパティにスペースと新しいクラスの名前を追加します。まず、id簡単に参照を取得できるように要素にを配置します。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>その後
var d = document.getElementById("div1");
d.className += " otherclass";前のスペースに注意してくださいotherclass。スペースを含めることが重要です。そうしないと、クラスリストでその前にある既存のクラスが損なわれます。
MDNのelement.classNameも参照してください。
フレームワークなしでこれを行う最も簡単な方法は、element.classList.addメソッドを使用することです。
var element = document.getElementById("div1");
element.classList.add("otherclass");編集： そして要素からクラスを削除したい場合-
element.classList.remove("otherclass");私は空のスペースを追加したり、エントリ処理を自分で複製したりする必要がないことを好みます（これは、document.classNameアプローチを使用するときに必要です）。ブラウザにはいくつかの制限がありますが、ポリフィルを使用して回避できます。
目的の要素 "d"を見つけます。
d.className += ' additionalClass'; //note the spaceこれを巧妙な方法でラップして、存在を確認したり、スペース要件などを確認したりできます。
splitある空白のクラス名を削除するには、結果の配列から不要なものを削除してから、joinもう一度配列を...またはを使用しますelement.classList.remove。
クロス互換
次の例ではclassname、<body>要素にaを追加します。これは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;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...）は通常のもの（if (a.classList) { ....）と比べて速度に違いがありますか？
classList.remove()ます。なぜそれを使わなかったのですか？jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListはクラスを削除する以外のすべてに使用しました、これが私がそれを求めている理由です。
純粋なJavaScriptを使用して要素にクラスを追加する別のアプローチ
クラスを追加する場合：
document.getElementById("div1").classList.add("classToBeAdded");クラスを削除する場合：
document.getElementById("div1").classList.remove("classToBeRemoved");私がしている作業がライブラリを使用する必要がない場合は、次の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;
}if( cn.indexOf( classname ) != -1 ) { return; } 「btn-info」クラスがすでにここにある状態で「btn」クラスを追加すると、失敗することに注意してください。
element.className.split(" ");ここで報告されている@AlexandreDieulotの問題を防ぐために使用する必要があります。
この1つのクラスを追加するだけではない場合（たとえば、非同期リクエストなどが続く場合）、PrototypeやjQueryなどのライブラリをお勧めします。
これにより、これを含め、実行する必要のあるすべてのことが非常に簡単になります。
したがって、ページにjQueryがあるとしましょう。次のようなコードを使用して、要素にクラス名を追加できます（この場合、ロード時）。
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );他のものについてはjQuery APIブラウザをチェックしてください。
classList.add OR classList.removeメソッドを使用して、要素からクラスを追加/削除できます。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")上記のコードは、nameElemにクラス「anyclass」を追加します（置き換えません）。同様に、classList.remove（）メソッドを使用してクラスを削除できます。
nameElem.classList.remove("anyclss")既存の値を削除または影響せずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。
document.getElementById("MyElement").className += " MyClass";既存のすべてのクラスを1つ以上の新しいクラスに置き換えるには、className属性を設定します。
document.getElementById("MyElement").className = "MyClass";（スペース区切りのリストを使用して、複数のクラスを適用できます。）
jQueryを使用せず、古いブラウザーをサポートする場合：
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}IE9が正式にシャットダウンさelement.classListれ、上記のように多くの方法でそれを達成できることはわかっclassListていますが、上記の多くの回答を参考にせずに、IE9がどのように機能するかを学習しようとしました。
以下のコードは、上記の多くの回答を拡張し、重複するクラスの追加を回避することでそれらを改善しています。
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');私も最速の方法はes5のようにElement.prototype.classListを使用することだと思います：document.querySelector(".my.super-class").classList.add('new-class')
しかし、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
})
}他の人が言ったことを詳しく説明するために、複数のCSSクラスがスペースで区切られた単一の文字列に結合されています。したがって、ハードコーディングしたい場合は、次のようになります。
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>そこから、新しいクラスを追加するために必要なJavaScriptを簡単に派生させることができます...要素のclassNameプロパティに新しいクラスが続くスペースを追加するだけです。これを知っていれば、必要に応じて後でクラスを削除する関数を作成することもできます。
簡単な方法で要素クラスを追加、削除、または確認するには：
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');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つ残してください。
新しいクラスを追加したいクラスが複数ある場合は、次のように使用できます
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>ブラウザのDOMで実行できる純粋なJavaScriptを使用する方が良いと思います。
これが機能的な使い方です。ES6を使用しましたが、JavaScript StyleGuideに適した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)
}
}純粋な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";
})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()まず、divにIDを指定します。次に、関数appendClassを呼び出します。
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>API querySelectorを使用して要素を選択し、要素と新しいクラス名をパラメーターとして使用して関数を作成できます。最新のブラウザーではクラスリストを使用し、その他ではIE8を使用します。その後、イベントの後に関数を呼び出すことができます。
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'または：
document.getElementById('come_id').classList.add('someclassname')最初のアプローチは、2番目のアプローチが機能しないときにクラスを追加するのに役立ちました。
の前にスペースを確保することを忘れないでください' someclassname'最初のアプローチでは。
削除するために使用できます：
document.getElementById('some_id').classList.remove('someclassname')このjsコードは私のために働きます
クラス名の置き換えを提供します
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name追加するだけ
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name使用を削除するには
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameこれが身体に役立つことを願っています
element.classList.add("my-class")代わりに使用してください。