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

Jawaban:

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
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