Javascriptで<html>にクラスを追加しますか？

87

<html>Javascriptを使用してルート要素にクラスを追加するにはどうすればよいですか？

javascript html

— ブランドン・レベデフ
ソース

これは私が始めたときに私が尋ねた質問の1つでした。私はそれについて言及した良い場所を決して見つけませんでした。ここで見てよかったです。

— Pow-Ian

ただ好奇心が強い-なぜあなたはこれをしたいのですか？

— David Hoerster 2012

@DavidModernizrがロードされない場合のフォールバックを追加します。Modernizrは、ロード時にクラス「js」を追加します。

— Brandon Lebedev 2012

1

modernizrを使用している場合は、マークアップにクラス「no-js」を実際に追加する必要があります。（modernizrがロードされると、このクラスが削除されます）

— Kevin Boucher

@ Kevin-すでにそうしました。HTML5ボイラープレートに行きましょう！

— Brandon Lebedev 2012

109

このような：

var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

root.setAttribute( 'class', 'myCssClass' );

または、これを「セッター」行として使用して、以前に適用されたクラスを保持します：（@ ama2に感謝）

root.className += ' myCssClass';

または、必要なブラウザサポートに応じて、次のclassList.add()方法を使用できます。

root.classList.add('myCssClass');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList http://caniuse.com/#feat=classlist

更新：

HTML要素を参照するためのより洗練された解決策は次のとおりです。

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//

— ケビン・ブーシェ
ソース

参考までに、classlist.add /.removeはdocument.documentElementでは機能しません。

— アンディマーサー

@AndyMercerそれはclassList.add（キャメルケース）です。

— Kevin Boucher 2017年

はい、明らかにそれはタイプミスでした。しかし、私が言ったことはまだ正しいです。classListdocument.documetElementでは機能しません。

— アンディマーサー

返信する前に3つの異なるブラウザで試してみたので、「明らかにタイプミス」ではありませんでした。（Chrome、Firefox、Safari- root.classList.add('myCssClass')3つすべてで動作しました。）IEを使用していますか？

— Kevin Boucher 2017年

document.documentElement.classList.addここではうまく機能しているようです。2018年にブラウザはこれをサポートし始めましたか？

— エイドリアン2018

14

これも機能するはずです：

document.documentElement.className = 'myClass';

互換性。

編集：

IE 10は、読み取り専用であると見なしています。まだ：

出来た！？

オペラ作品：

私はそれがで動作することも確認できます：

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
ソース

あなたの例にはINVISIBLECHARACTERSがあります。つまりU+200B、最後のアポストロフィの後で、webpackや他のコンパイラでのコンパイルに失敗します。

— entozoon

@entozoonなんて奇妙なんだ！それを指摘してくれてありがとう。私は今それを修正しました：）

— c24w19年

11

jQueryをご覧になることをお勧めします。

jQueryの方法：

$("html").addClass("myClass");

— aebersold
ソース

26

JavaScriptで要素を選択するのにjQueryは必要ありません。

— David Hoerster 2012

1

jQueryは実際には習得が容易であり、とにかく最近ではほとんどの場合に使用されています。しかし、はい、このタスクには必要ありません;）

— aebersold 2012

1

ええ、そうです、私たちはjqueryが何であるかを知っていますが、純粋にjavascriptの質問に「

— learnjquery

2

@aebersold jQueryは習得と使用が簡単であることに同意しますが、クラスを追加するためだけにダウンロード（および追加のリクエスト）するのに50Kであるため、私見は少しやり過ぎです。

— David Hoerster 2012

jQueryの死！勝利のためのバニラJS！

— Fresheyeball 2013年

9

document.documentElement.classList.add('myCssClass');

classListie10以降でサポートされています：https：//caniuse.com/#search=classlist

— トム・エステレス
ソース

7

クラスを追加して上書きしないでください

var headCSS = document.getElementsByTagName("html")[0].getAttribute("class") || "";
document.getElementsByTagName("html")[0].setAttribute("class",headCSS +"foo");

ブラウザの非互換性を回避するために、jQueryを使用することをお勧めします

— ama2
ソース

-2

Jqueryを使用すると...次のようにhtml要素にクラスを追加できます。

$(".divclass").find("p,h1,h2,h3,figure,span,a").addClass('nameclassorid');

nameclassoridポイントなしまたは先頭に＃

— ルースバウティスタ
ソース