Bu makale, HTML'de pratik uygulamayla birlikte 'clientTop' DOM öğesini göstermektedir.
DOM Öğesi “clientTop” HTML'de Nasıl Kullanılır?
'clientTop' özelliği, web sayfaları oluştururken HTML öğelerinin yerleşimi ve konumu ile çalışmak için kullanışlıdır. Karşılığında, duyarlı ve dinamik web sitesi düzenleri oluşturmaya yardımcı olur
Örnek
“clientTop” özelliğini daha iyi anlamak için bir örnek verelim. Örneğin, üst konumdan bordürün ağırlığı bu örnekte değerlendirilir:
< vücut >
< h3 İD = 'örnek' > Daha iyi Açıklama için Linuxhint tarafından sağlanan makale < / h3 >
< / vücut >
İlk önce, “
< stil >
#örnek {
sınır : 2 piksel düz siyah;
dolgu: 10 piksel;
arka plan- renk : açık gri;
}
< / stil >
Bundan sonra, içinde “
Yukarıda belirtilen kodun yürütülmesinden sonra, web sayfası aşağıdaki gibi görünür:
Çıktı, div ve h3 öğelerinin web sayfasında temel stille görüntülendiğini gösterir.
'clientTop' Özelliğini Kullanın
“ müşteriÜst ” özelliğinde, aşağıdaki kod satırlarını “
örnekti = Document.getElementById ( 'örnek' ) ;
var üst Yükseklik = örnek.clientTop;
konsol.log ( 'Üst Kenarlık Yüksekliği:' + üst Yükseklik + 'piksel' ) ;
< / senaryo >
Yukarıdaki kod parçacığında:
- İlk olarak, değişken ' örnek ”, bilgileri depolayan veya bazı eylemleri HTML öğesine uygulayan oluşturulur.
- Sonra, “ üst Yükseklik ” değişkeni “ örnek ” ile birlikte değişken müşteriÜst ' mülk.
- Sonunda, “ üst Yükseklik konsolda ' değişkenini kullanarak ' konsol.log() ' yöntem.
Yukarıdaki kod parçacığının yürütülmesinden sonra konsol şöyle görünür:
Yukarıdaki çıktı, seçilen öğeler için üst sınırın yüksekliğinin/ağırlığının konsolda piksel cinsinden görüntülendiğini göstermektedir.
Çözüm
“ müşteriÜst ” özelliği, kenarlıkları ve dolguları da dahil olmak üzere HTML öğelerinin toplam yüksekliğini ölçer. 'clientTop' özelliği, etkileşimli web sayfaları oluşturmaya yardımcı olan seçili HTML öğesi için en üst konumdan kenarlık ağırlığını döndürür. Bu makale, HTML'deki DOM öğesi 'clientTop' ile ne kastedildiğini göstermiştir.