Tambahkan kelas ke <html> dengan Javascript?

88

Bagaimana Anda menambahkan kelas ke <html>elemen root menggunakan Javascript?

javascript html

— Brandon Lebedev
sumber

ini adalah salah satu pertanyaan yang saya tanyakan ketika saya mulai. Saya tidak pernah menemukan tempat bagus yang menyebutkannya. Saya senang melihatnya di sini.

— Pow-Ian

Hanya ingin tahu - mengapa Anda ingin melakukan ini?

— David Hoerster

@David Untuk menambahkan fallback jika Modernizr tidak dimuat. Modernizr menambahkan kelas "js" saat dimuat.

— Brandon Lebedev

1

Anda harus benar-benar menambahkan kelas "no-js" ke markup Anda jika Anda menggunakan modernizr. (Jika modernizr memuat itu akan menghapus kelas ini)

— Kevin Boucher

@Kevin - Sudah melakukannya. Jalankan Boilerplate HTML5 !

— Brandon Lebedev

113

Seperti ini:

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

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

Atau gunakan ini sebagai baris 'penyetel' untuk mempertahankan kelas yang diterapkan sebelumnya: (terima kasih @ ama2)

root.className += ' myCssClass';

Atau, bergantung pada dukungan browser yang diperlukan, Anda dapat menggunakan classList.add()metode ini:

root.classList.add('myCssClass');

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

MEMPERBARUI:

Solusi yang lebih elegan untuk mereferensikan HTMLelemen mungkin seperti ini:

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

— Kevin Boucher
sumber

FYI, classlist.add / .remove tidak berfungsi di document.documentElement.

— Andy Mercer

@AndyCercer Ini classList.add(kasus unta).

— Kevin Boucher

Ya jelas itu salah ketik. Tapi apa yang saya katakan masih benar. classListtidak berfungsi di document.documetElement.

— Andy Mercer

Saya mencobanya di tiga browser berbeda sebelum menjawab, jadi itu bukan "jelas salah ketik". (Chrome, Firefox, Safari-- root.classList.add('myCssClass')bekerja di ketiganya.) Apakah Anda menggunakan IE?

— Kevin Boucher

document.documentElement.classList.addtampaknya berfungsi dengan baik di sini. Apakah browser pada tahun 2018 mulai mendukung ini?

— adrian

15

Ini juga harus bekerja:

document.documentElement.className = 'myClass';

Kesesuaian .

Edit:

IE 10 menganggap itu hanya baca; namun:

Berhasil !?

Karya Opera:

Bekerja

Saya juga dapat mengonfirmasi bahwa ini berfungsi di:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
sumber

Contoh Anda memiliki KARAKTER YANG TIDAK TERLIHAT, yaitu U+200Bsetelah tanda kutip terakhir, menyebabkan kompilasi gagal di webpack dan kompiler lain!

— entozoon

@entozoon sungguh aneh! Terima kasih telah menunjukkannya. Saya sudah memperbaikinya sekarang :)

— c24w

11

Saya merekomendasikan agar Anda melihat jQuery .

jQuery cara:

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

— aebersold
sumber

26

Anda tidak perlu jQuery untuk memilih elemen dengan JavaScript.

— David Hoerster

1

jQuery benar-benar mudah dipelajari, dan digunakan sebagian besar waktu, hari ini. Tapi ya, Anda tidak membutuhkannya untuk tugas ini;)

— aebersold

1

ya, benar, kami tahu apa itu jquery, tetapi menjawab pertanyaan javascript murni dengan "pelajari jquery" adalah yang mengejutkan saya :)

— povilasp

2

@aebersold Saya setuju bahwa jQuery mudah dipelajari dan digunakan, tetapi pada 50K untuk diunduh (ditambah permintaan tambahan) hanya untuk menambahkan kelas, itu sedikit berlebihan IMHO.

— David Hoerster

Kematian bagi jQuery! Vanilla JS untuk menang!

— Fresheyeball

9

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

classListdidukung sejak ie10: https://caniuse.com/#search=classlist

— Tom Esterez
sumber

7

Anda harus menambahkan kelas agar tidak menimpanya

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

Saya masih merekomendasikan menggunakan jQuery untuk menghindari ketidaksesuaian browser

— ama2
sumber

-2

Dengan Jquery ... Anda dapat menambahkan kelas ke elemen html seperti ini:

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

nameclassorid tidak ada poin atau # di awal

— Roos Bautista
sumber