jQueryを使用しないで<html>要素にクラスを追加するにはどうすればよいですか？

<html>の要素に、クラス名 "foo"を追加するにはどうすればいいですか？ jQuery（または同様のライブラリ）を使用していますか？jQueryを使用しないで<html>要素にクラスを追加するにはどうすればよいですか？

2011-09-12 user940633

非常に多くの重複... – Zirak

@CoryMawhorter [クラスの操作]（http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript/196038 ＃196038）、[html要素を取得]（http://stackoverflow.com/questions/9362907/how-can-i-reference-the-html-elements-corresponding-dom-object/9362944#9362944） – Zirak

要素を取得してクラスのリストに追加するだけです。クラスの要素のリストにアクセスするための

document.documentElement.className += " foo";

出典

2011-09-12 13:28:07 Quentin

ありがとう！基本的なJavaScriptについて何も知らなくてもjQueryで何かできることは夢中です...これまで何百万回も尋ねられていたのであれば、jQueryベースのソリューションしか見つけることができませんでした。 – user940633

同じように ' - = '演算子を使ってクラスを削除すると、クラス名に' NaN'が無かったのです（JSは '+'と '-'演算子を使って数値に自動的に変換されます？）。もちろん、クラスが1つしかない場合は、単純に '=" ";'を実行して削除することができますが、[OlivérKovácsの回答]（https://stackoverflow.com/a/22224493/1765386）が最適です私の場合。 – Anderson

@Anderson JSでは、 '+ ='を使うと 'document.documentElement.className'と' 'foo" 'という2つの文字列を連結しますが、JavaScriptの文字列には' -'演算子はありません。その結果、インタプリタは暗黙のうちに 'document.documentElement.className'と' 'foo" 'という文字列を' NaN'という数字に変換します。 'NaN - NaN'の結果は' NaN'です。 Chromeコンソールで '' hello " - " foo "'を実行すると、同じ結果が表示されます。 –

You can use classList。

document.documentElement.classList.add('my-awesome-class'); 

document.documentElement.classList.remove('my-awesome-class'); 

document.documentElement.classList.contains('my-awesome-class');

出典

2014-03-06 12:26:25 Oliver

注意して使用すると、classListはエクスプローラブラウザを部分的にサポートします： http://caniuse.com/#search=classList –

AddClass(document.documentElement, 'my-awesome-class', true); //add 
AddClass(document.documentElement, 'my-awesome-class', false); //remove 

function AddClass(o,c,bAdd){ 
    var list = o.className.split(" "); 
    if (list.indexOf(c)!==-1){ 
     if (!bAdd) delete list[list.indexOf(c)]; 
    }else{ 
     if (bAdd) list[list.length] = c; 
    } 
    o.className = list.join(" "); 
}

出典

2014-12-15 08:56:35

jQueryを使用しないで<html>要素にクラスを追加するにはどうすればよいですか？

答えて

関連する問題