Bu kılavuz, JavaScript'te aktif bir sınıf ekleme prosedürünü açıklayacaktır.
JavaScript'te Aktif Sınıf Nasıl Eklenir?
Aktif bir sınıf eklemek için aşağıdaki yöntemleri kullanacağız:
Gelelim ilk yönteme!
Yöntem 1: JavaScript'te Etkin Sınıf Eklemek için Document.getElementById() ClassList.add() Yöntemiyle Kullanın
JavaScript'te, “ belge.getElementById() ” yöntemi, belirli bir öğeye kimliğiyle erişmek için kullanılır. Ancak, öğeleri sınıflara değil, yalnızca kimliklerine göre seçer. ' ile kullanabilirsiniz. classList.add() ” JavaScript'te aktif bir sınıf ekleme yöntemi.
Bu yöntemi bir örnek alarak inceleyelim.
Örnek
HTML dosyamızda “ ” bir metin içeren etiket, kimliğini “ olarak belirtin Txt ” ve bir “ ekleyin tıklamada ” olayını tetikleyecek olan olay etkinleştir() ' işlev.
etiketinin içineetiketini ekleyin:
< kimlik = 'Txt' tıklamada = 'etkinleştir()' > Buraya dokunun p >JavaScript dosyasında, activate() işlevini, ilk olarak Document.getElementbyId() yöntemindeki kimliğini kullanarak paragraf öğesine erişecek şekilde tanımlayın. Ardından, stil oluşturma amacıyla sınıf listesine bir CSS sınıfı ekleyin:
fonksiyon etkinleştir ( ) {
var a = belge. getElementById ( 'Txt' ) ;
a. sınıf listesi . Ekle ( 'yeni sınıf' ) ;
}
CSS dosyasında “ öğesinin önüne bir nokta koyun. yeni sınıf ” ve “ arka plan rengi 'özellik bir değer' Portakal ”:
. yeni sınıf {arka fon - renk : Portakal ;
}
Sonuç olarak, paragraf öğesine tıkladığınızda, eklenen arka plan özelliği ona uygulanacaktır:
Aktif bir sınıf eklemek için document.querySelector()'u kullanacağımız aşağıdaki metoda bir göz atalım.
Yöntem 2: JavaScript'te Etkin Sınıf Eklemek için document.querySelector()'u classList.add() Yöntemiyle Kullanın
JavaScript'te, “ Document.querySelector() ” yöntemi, koddan ilk öğeyi almak için kullanılır. Hem querySelector() yönteminde sınıfları hem de kimlikleri belirtebilirsiniz. “ile kullanılabilir. classList.add() ” JavaScript'te aktif bir sınıf ekleme yöntemi.
Örnek
Şimdi sadece “ Document.querySelector() 'kimliği ile' #Txt ” paragraf öğesini seçmek için. Yine, aktif “ eklemek için classList.add() yöntemi kullanılacaktır. yeni sınıf ”:
fonksiyon etkinleştir ( ) {var a = belge. sorguSelector ( '#Txt' ) ;
a. sınıf listesi . Ekle ( 'yeni sınıf' ) ;
}
Çıktı
JavaScript'e aktif sınıf eklemek için en basit iki yöntemi öğrendik
Çözüm
Aktif sınıf eklemek için “ getElementById() ' veya ' sorguSelector() ” classList.add() yöntemiyle. Bahsedilen her iki yöntem de öğeleri önce kimliklerine göre alır, ardından stil amaçları için kullanılabilecek öğeye atanan yeni sınıf adı olan classList.add() yöntemini kullanır. Bu gönderi, JavaScript'te aktif bir sınıf ekleme ile ilgili prosedürü açıklamaktadır.