Bu yazı, JavaScript'te 'offsetTop' özelliğinin çalışmasını ayrıntılı olarak açıklamaktadır.
JavaScript'te HTML DOM “offsetTop” Özelliği Nasıl Çalışır?
“ ofsetÜst ” özelliği, HTML öğelerinde çalışır ve üst öğesinin 'kenar boşluğunu', üstteki 'dolguyu', 'kenarlığı' ve 'kaydırma çubuğunu' da döndürür.
Sözdizimi
öğe. ofsetÜst
Bu sözdiziminde, “ eleman ”, belirli HTML öğesinin görünüme göre üst konumunu belirtir (web sayfası içeriğinin görüntülendiği boş bir alan).
Not: Döndürülen değer aşağıdakileri içerir:
- üst konum ve öğenin kenar boşluğu.
- ebeveynin üst kenarlığı, kaydırma çubuğu ve dolgusu.
Yukarıdaki sözdizimini pratik olarak kullanalım.
Örnek: HTML Üst Konumunu Değerlendirmek için 'offsetTop' Özelliğini Uygulama
Bu örnekte “ ofsetÜst ” özelliği, belirli HTML öğesinin üst konumunu hesaplamak için, yani, “ İlk olarak, aşağıdaki HTML kodunu gözden geçirin: Yukarıdaki kodda: Şimdi, verilen JavaScript kodunu göz önünde bulundurun: Yukarıdaki kod satırlarında: Çıktı Bu sonuçta, verilen div'in (kenar boşluğu dahil) üst konumunun, yani “ 35 piksel ” belirtilen nota göre (blog başlangıcında) hesaplanır ve buton tıklandığında görüntülenir. JavaScript, “ ofsetÜst HTML öğesinin görüntü alanına göre en üst konumunu hesaplamak için ” özelliği. Bir elemanın hesaplanan en üst konumunu “ içinde bir tamsayı değer olarak döndürür. piksel ”. Bu yazı, JavaScript'te HTML DOM Öğesi 'offsetTop' özelliğinin amacını, kullanımını ve uygulanmasını gösterdi.
HTML Kodu
< B > Ayrıntıları Bu div'ler : B >< br >
tepe : 20 piksel < br >
konum : akraba < br >
metin - hizalamak : merkez < br >
marj : 15 piksel < br >
sınır : 3 piksel < br >
div >< br >
< tıklama düğmesi = 'jsFunc()' > Tıkla düğme >
< p kimliği = 'için' > P >
JavaScript Kodu
jsFunc işlevi ( ) {
karaağaçtı = belge. getElementById ( 'Böl1' ) ;
nerede metin = 'Hesaplanan OffsetTop: ' + karaağaç ofsetÜst + 'px
' ;
belge. getElementById ( 'için' ) . içHTML = txt ;
}
senaryo >
Çözüm