Class niteliği, CSS'de karşılık gelen sınıf adına sahip öğeler için bazı görevlerin yerine getirilmesi amacıyla kullanılabilir. Bu yazımızda JavaScript kullanarak bir elemente nasıl sınıf ekleneceğini tartışıyoruz. İçinde JavaScript Bir öğeye sınıf eklemek için bazı yaklaşımlar vardır. Şunu kullanabiliriz: .sınıf adı mülk veya .eklemek() Belirli bir öğeye bir sınıf adı ekleme yöntemi.
Şimdi bir öğeye sınıf ekleme yaklaşımlarını tartışalım.
.className özelliğini kullanma
.sınıf adı özellik, bir öğenin sınıf adını ayarlar. Bu özellik, bir öğenin sınıf özelliğinin değerini döndürmek için kullanılabilir. Bu özelliği, bir HTML öğesine, mevcut sınıfını değiştirmeden bir sınıf eklemek için kullanabiliriz.
Birden fazla sınıf eklemek için adlarını aşağıdaki gibi boşluklarla ayırmamız gerekir: 'sınıf1 sınıf2' .
Eğer bir eleman için zaten bir sınıf tanımlanmışsa ve aynı elemana yeni bir sınıf adı eklememiz gerekiyorsa, yeni sınıf adını yazmadan önce boşluk bırakarak bildirilmelidir, aksi takdirde mevcut sınıf adının üzerine yazar. Aşağıdaki gibi yazılabilir:
document.getElementById('div1').className = ' newClass';
Yukarıdaki kodda önce bir boşluk ekledik yeniSınıf .
Sözdizimi
Bu özelliğin sınıf adını ayarlamak veya döndürmek için yaygın olarak kullanılan sözdizimi aşağıda verilmiştir.
Sınıf adını ayarlamak için
element.className = class
Sınıf adını döndürmek için
element.className
Kullanım örneği .sınıf adı mülkiyet şu şekilde verilmiştir.
Örnek - Sınıf adını ekleme
Bu örnekte, şunu kullanıyoruz: .sınıf adı eklemek için özellik 'için' kimliğe sahip paragraf öğesine sınıf 'p1' . Sınıf adını kullanarak ilgili paragrafa CSS'yi uyguluyoruz 'için' .
Verilene tıklamamız gerekiyor HTML düğmesi 'Sınıf Ekle' Etkisini görmek için.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Şimdi Test Edin Çıktı
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
