Bu makale, bir gövdenin JavaScript kullanarak belirli bir sınıfa sahip olup olmadığını kontrol etme yaklaşımlarını gösterecektir.
JavaScript Kullanarak Body'nin Belirli Bir Sınıfı Olup Olmadığı Nasıl Kontrol Edilir?
Bir gövdenin JavaScript kullanarak belirli bir sınıfa sahip olup olmadığını kontrol etmek için aşağıdaki yaklaşımları uygulayın:
- “ sınıfListesi 'mal ve' içerir() ' yöntem.
- “ getElementsByTagName() ' ve ' kibrit() ” yöntemleri.
- “ jQuery ”.
Yaklaşımların her birini tek tek açıklayalım!
Yaklaşım 1: ClassList Özelliğini ve include() Yöntemlerini Kullanarak Body'nin JavaScript'te Belirli Bir Sınıfı Olup Olmadığını Kontrol Edin
“ sınıfListesi ” özelliği, bir öğenin CSS sınıfı adlarını verir. Oysa “ içerir() ” yöntemi, bir düğüm bir alt öğe ise true değerini verir. Birleştirilen bu yöntemler, ilişkili öğedeki içerilen sınıfa erişmek için uygulanabilir.
Sözdizimi
düğüm. içerir ( çıplak )
Yukarıdaki sözdiziminde:
- “ çıplak ”, ilişkili düğümün soyundan gelen düğüme karşılık gelir.
Örnek
Aşağıda verilen örneğe bir göz atalım:
< merkez >< gövde sınıf = 'içermek' >
< h2 > Bu, Linuxhint Web Sitesidir h2 >
merkez > gövde >
< komut dosyası türü = 'metin/javascript' >
eğer ( belge. gövde . sınıfListesi . içerir ( 'içermek' ) ) {
konsol. kayıt ( 'Body öğesinin sınıfı var' ) ;
}
başka {
konsol. kayıt ( 'Body öğesinin sınıfı yok' ) ;
}
senaryo >
Aşağıda belirtilen adımları yukarıdaki kodda verildiği gibi uygulayın:
- İlk olarak, bir “
” set özniteliğine sahip eleman “ sınıf ”. - Ayrıca, belirli öğenin ( ) içine bir başlık ekleyin.
- JS kodunda, “ sınıfListesi ' ile birleştirilen özellik' içerir() ' yöntem.
- Bu, sonuç olarak ilişkili ' sınıfına erişecektir.
yöntemin parametresinde belirtilen sınıf adına dayalı öğe. - Karşılanan koşul üzerine, “ eğer ” koşulu yürütülür.
- Aksine, “ başka ” deyimi kod bloğu yürütülür.
Çıktı
Yukarıdaki çıktıda, ilgili sınıfın '' içinde yer aldığı görülebilir.
Yaklaşım 2: getElementsByTagName() ve match() Yöntemlerini Kullanarak Body'nin JavaScript'te Belirli Bir Sınıfı Olup Olmadığını Kontrol Edin
“ getElementsByTagName() ” yöntemi, belirli bir etiket adına sahip tüm öğelerin bir koleksiyonunu verir. “ kibrit() ” yöntemi, belirtilen değeri dizeyle eşleştirir. Bu yöntemler, gerekli öğeye etiketinden erişmek ve belirli sınıfı kontrol etmek için kullanılabilir.
Sözdizimi
belge. getElementsByTagName ( etiket )Sağlanan söz diziminde:
- “ etiket ”, öğenin etiket adını temsil eder.
Örnek
Aşağıdaki örnek, tartışılan kavramı göstermektedir:
< img kaynağı = 'template2.png' yükseklik = '150 piksel' Genişlik = '150 piksel' >
merkez > gövde >
< komut dosyası türü = 'metin/javascript' >
İzin Vermek almak = belge. getElementsByTagName ( 'gövde' ) [ 0 ] . sınıf adı . kibrit ( /içerir/ )
eğer ( almak ) {
konsol. kayıt ( 'Body öğesinin sınıfı var' ) ;
}
başka {
konsol. kayıt ( 'Body öğesinin sınıfı yok' ) ;
}
senaryo >
Yukarıdaki kod parçacığında:
- Aynı şekilde, bir “
” Belirtilen sınıfa sahip öğe. - Ayrıca, önceki adımda belirtilen öğe içinde ayarlanan boyutlara sahip bir görüntü içerir.
- JavaScript kod satırlarında, “
” öğesini kullanarak etiketine göre getElementsByTagName() ' yöntem. - “ [0] ”, önceki adımda belirtilen etikete karşılık gelen ilk öğenin getirileceğini belirtir.
- “ sınıf adı 'mülk ve' kibrit() ” yöntemi, parametresinde belirtilen sınıf için “ ile eşleşecektir.
” öğesi. - Önceki ifade “ eğer ” koşulu, önceki adımlardaki tüm koşulların karşılanması durumunda yürütülür.
- Aksi takdirde, ikinci ifade görüntülenecektir.
Çıktı
Yukarıdaki çıktı, belirli bir sınıf için uygulanan koşulun karşılandığını gösterir.
Yaklaşım 3: jQuery Kullanarak Body'nin JavaScript'te Belirli Bir Sınıfı Olup Olmadığını Kontrol Edin
Bu yaklaşım, gerekli öğeye doğrudan erişmek ve yönteminin yardımıyla belirli sınıfı basitçe bulmak için uygulanabilir.
Örnek
Aşağıda verilen örnek üzerinden gidelim:
< merkez >< gövde sınıf = 'içerir' >
< metin alanı yer tutucusu = 'Herhangi bir metin yazın...' > metin alanı >
merkez > gövde >
eğer ( $ ( 'gövde' ) . hasClass ( 'içerir' ) ) {
Alarm ( 'Body öğesinin sınıfı var' )
}
başka {
Alarm ( 'Body öğesinin sınıfı yok' )
}
senaryo >
Yukarıdaki kod satırlarında:
- Dahil et ' jQuery ” kitaplığının işlevlerinden yararlanmak için.
- Benzer şekilde, “
” belirtilen sınıfa sahip eleman. - Ayrıca, bir “
” öğesi önceki adımda belirtilen öğenin içindedir. - JS kodunda, “
” öğesi. Ayrıca, “ hasClass() ” Getirilen öğede belirtilen sınıfı aramak için yöntem. - Bu sonuç olarak, yerine getirilen koşul üzerine önceki mesajı uyaracaktır.
- Diğer durumda, ikinci ifade görüntülenecektir.
Çıktı
Yukarıdaki çıktı, istenen gereksinimin elde edildiğini ima eder.
Çözüm
“ sınıfListesi 'mal ve' içerir() ” yöntemi, “ getElementsByTagName() ' ve ' kibrit() ' yöntemler veya ' jQuery JavaScript kullanarak bir gövdenin belirli bir sınıfa sahip olup olmadığını kontrol etmek için kullanılabilir. Bu yaklaşımlar, ilgili öğeye doğrudan, etiketine atıfta bulunarak veya jQuery yöntemini kullanarak bir öğe içindeki belirli bir sınıfı aramak için kullanılabilir. Bu blog, bir gövdenin JavaScript'te belirli bir sınıfa sahip olup olmadığını kontrol etmeyi açıkladı