Bu blog, DOM öğesinin kullanımını gösterir müşteri Yüksekliği HTML'de.
DOM Öğesi “clientHeight” HTML'de Nasıl Kullanılır?
“ müşteri Yüksekliği ” özelliği, geliştiricilerin bir öğenin görünür içeriğinin yüksekliğini hesaplamasına olanak tanır. Öğelerin birbirine göre konumlandırılmasına veya bir kullanıcının kaydırılabilir bir kabın sağ kenarına kaydırılıp kaydırılmadığının belirlenmesine yardımcı olur. Ayrıca web sayfasında kalan kullanılmayan alan hakkında bilgi verir.
Örnek
'clientHeight' özelliğinin daha iyi gösterilmesi için bir örnek üzerinden gidelim. Örneğin, “ tıklamada tarafından sağlanan sonucu görüntülemek için olay dinleyicisi kullanılır. müşteri Yüksekliği ' mülk:
< vücut >
< h2 İD = 'öğe' >< / h2 >
< h2 İD = 'öğe' tıklamada = 'showelementHeight()' >
Yüksekliği göstermek için Linuxhint Makalesine tıklayın!
< / h2 >
< senaryo >
işlev showelementHeight() {
var örnek = document.getElementById('element');
var elementHeight= örnek.clientHeight;
alert('Yükseklik: ' + elementHeight + ' piksel.');
}
< / senaryo > >
< / vücut >
Yukarıdaki kod parçacığının açıklaması aşağıda açıklanmıştır:
- Başlangıçta bir “oluşturun ' etiketinin içinde '
” etiketleyin ve ona bazı sahte veriler sağlayın. Ayrıca, “ kimliği atayın eleman ” seçili HTML öğesine. - Sonra, bir 'ekleyin tıklamada() çağıran ” olay dinleyicisi “ showelementHeight() Kullanıcı '' düğmesine tıkladığında 'işlevi' ” öğesi.
- Ardından, “içinde showelementHeight() 'işlevi' adlı bir değişken oluşturur. örnek kimliğine sahip HTML öğesi için bir örnek görevi gören ” eleman ”.
- Ardından, “ adlı başka bir değişken oluşturun. eleman Yüksekliği 'clientHeight' özelliği tarafından sağlanan sonucu depolayan.
- Bundan sonra, “ eleman Yüksekliği Uyarı kutusundaki '' değişkeni ' uyarı() ' yöntem.
Son olarak, “ stilini oluşturmak için aşağıdaki CSS özelliklerini ekleyin. h2 ” öğesi:
< stil >
#element {
kenar boşluğu: 20 piksel;
dolgu: 10 piksel;
arka plan- renk : koyu mavi;
yükseklik : 300 piksel;
metin- hizalamak : merkez;
astar- yükseklik : 100 piksel;
}
< / stil >
Yukarıdaki kod parçacığında, aşağıdaki CSS özellikleri, kimliği ' olan div'e atanır. eleman ”:
- “ 20 piksel ”, “ 10 piksel ' Ve ' koyu camgöbeği ' değerler CSS'ye sağlanır ' marj ”, “ dolgu malzemesi ' Ve ' arka plan rengi ” özellikleri sırasıyla.
- Ayrıca “ yükseklik ”, “ Metin hizalama ' Ve ' satır yüksekliği ” Kullanıcı görünürlüğünü artırmak için CSS özellikleri.
Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür:
Çıktı, kullanıcı öğeye her tıkladığında, seçilen öğenin yüksekliğinin uyarı kutusunda görüntülendiğini görüntüler.
Çözüm
kullanmak için “ müşteri Yüksekliği ” özelliği, id niteliğine erişerek HTML öğesini seçin. Bundan sonra, 'clientHeight' özelliğini ekleyin ve sonucu görüntüleyin. Salt okunur bir özelliktir ve sonucu piksel cinsinden döndürür. 'clientHeight' özelliği, '