Javascript ile <html> sınıfına eklensin mi?

88

<html>Javascript kullanarak kök öğeye nasıl sınıf eklersiniz ?

javascript html

— Brandon Lebedev
kaynak

Bu, başladığımda sorduğum sorulardan biriydi. Bundan bahseden iyi bir yer bulamadım. Burada gördüğüme sevindim.

— Pow-Ian

Sadece merak ediyorum - bunu neden yapmak isteyesiniz?

— David Hoerster

@David Modernizr'in yüklenmemesi durumunda bir yedek eklemek için. Modernizr, yüklendiğinde "js" sınıfını ekler.

— Brandon Lebedev

1

Modernizr kullanıyorsanız, işaretlemenize gerçekten "no-js" sınıfını eklemelisiniz. (Modernizr yüklerse bu sınıfı kaldıracaktır)

— Kevin Boucher

@Kevin - Zaten yaptım. Git HTML5 Demirbaş !

— Brandon Lebedev

113

Bunun gibi:

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

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

Veya daha önce uygulanan sınıfları korumak için bunu 'ayarlayıcı' çizginiz olarak kullanın: (teşekkürler @ ama2)

root.className += ' myCssClass';

Veya gerekli tarayıcı desteğine bağlı olarak şu classList.add()yöntemi kullanabilirsiniz :

root.classList.add('myCssClass');

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

GÜNCELLEME:

Öğeye referans vermek için daha zarif bir çözüm HTMLşu olabilir:

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

— Kevin Boucher
kaynak

Bilginize, classlist.add / .remove, document.documentElement üzerinde çalışmıyor.

— Andy Mercer

@AndyMercer It's classList.add(deve çantası).

— Kevin Boucher

Evet belli ki bu bir yazım hatasıydı. Ama söylediklerim hala doğru. classListdocument.documetElement üzerinde çalışmaz.

— Andy Mercer

Yanıt vermeden önce üç farklı tarayıcıda denedim, bu yüzden "açıkça bir yazım hatası" değildi. (Chrome, Firefox, Safari - üçünde de root.classList.add('myCssClass')çalıştı.) IE kullanıyor musunuz?

— Kevin Boucher

document.documentElement.classList.addburada iyi çalışıyor gibi görünüyor. 2018'de tarayıcılar bunu desteklemeye başladı mı?

— adrian

15

Bu da işe yaramalı:

document.documentElement.className = 'myClass';

Uyumluluk .

Düzenle:

IE 10, salt okunur olduğunu varsayar; hala:

İşe yaradı!?

Opera çalışır:

İşler

Ayrıca çalıştığını onaylayabilirim:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
kaynak

U+200BÖrneğinizde GÖRÜNMEZ KARAKTERLER var, yani son kesme işaretinden sonra, web paketinde ve diğer derleyicilerde derlemede başarısız olmasına neden oluyor!

— entozoon

@entozoon ne kadar garip! Bunu belirttiğiniz için teşekkürler. Şimdi düzelttim :)

— c24w

11

JQuery'ye bir göz atmanızı tavsiye ederim .

jQuery yolu:

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

— Aebersold
kaynak

26

JavaScript ile bir eleman seçmek için jQuery'ye ihtiyacınız yoktur.

— David Hoerster

1

jQuery aslında öğrenmesi kolay ve bu günlerde çoğu zaman zaten kullanılıyor. Ama evet, bu görev için buna ihtiyacınız yok;)

— aebersold

1

evet, doğru,

— jquery'nin

2

@aebersold jQuery'nin öğrenilmesinin ve kullanılmasının kolay olduğunu kabul ediyorum, ancak 50K'da indirmek (artı ek bir istek) sadece bir sınıf eklemek için biraz fazla IMHO.

— David Hoerster

JQuery'ye ölüm! Vanilla JS galibiyet için!

— Fresheyeball

9

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

classListie10'dan beri desteklenmektedir: https://caniuse.com/#search=classlist

— Tom Esterez
kaynak

7

Sınıf eklemelisiniz, üzerine yazmamalısınız

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

Tarayıcı uyumsuzluklarından kaçınmak için jQuery kullanmanızı tavsiye ederim.

— ama2
kaynak

-2

Jquery ile ... html öğelerine aşağıdaki gibi sınıf ekleyebilirsiniz:

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

nameclassorid nokta yok veya başında #

— Roos Bautista
kaynak