Yükseklik ve genişlik, bir web sayfasının düzenini tasarlarken en çok dikkate alınan boyutlardır.
'Yükseklik', bir nesnenin yukarıdan aşağıya uzunluğunun ölçümünü gösterirken, 'genişlik' bir nesnenin bir taraftan diğer tarafa ne kadar geniş olduğunu gösterir. Bu faktörler, pencerede bir nesnenin tahsisinin ayarlanmasına yardımcı olur. JavaScript'te, “ yükseklik ' Ve ' Genişlik ” özellikler ayrıca sırasıyla “inner” yani “innerHeight/innerWidth” ve “outer” yani “outerHeight/outerWidth” olmak üzere iki kategoriye ayrılır.
Bu yazı, JavaScript'teki Window 'innerHeight' özelliğinin amacını ve çalışmasını ayrıntılı olarak açıklamaktadır.
JavaScript'te Window “innerHeight” Özelliği Ne İşe Yarar?
“ iç Yükseklik ” özelliği, konum çubuğu, araç çubuğu, menü çubuğu ve diğerleri hariç olmak üzere tarayıcı penceresinin görüntü alanı yüksekliğini alan “pencere” nesnesi ile ilişkilidir. Ayrıca, varsa yatay kaydırma çubuğunun yüksekliğini de içerir. Bu özelliğin döndürülen değeri, web sayfası içeriğini görüntüleyen bir alan olan 'düzen görünüm alanı' penceresinden alınır.
Temel Sözdizimi
window.innerHeight VEYA innerHeight
Yukarıdaki sözdizimine göre, “ iç Yükseklik ” özelliği doğrudan veya “window” nesnesi kullanılarak kolayca uygulanabilir.
Yukarıda tanımlanan özelliği temel sözdizimi yardımıyla pratik olarak gerçekleştirelim.
Örnek 1: Tarayıcı Penceresinin Görüntü Alanı Yüksekliğini Döndürmek için Pencere 'innerHeight' Özelliğini Uygulama
Bu örnek, tarayıcı penceresinin görüntü alanı yüksekliğini almak için 'window' nesnesiyle 'innerHeight' özelliğini kullanır.
HTML Kodu
İlk olarak, aşağıda belirtilen koda bir göz atın:
< h2 > Pencere innerHeight Özelliği h2 >< düğme tıklamada = 'jsFunc()' > Yükseklik Al düğme >
< P İD = 'için' > P >
Yukarıdaki kod satırlarında:
- “ ” etiketi 2. seviye alt başlığı tanımlar.
- “
” etiketi, olay tetiklendiğinde “jsFunc()” işlevini çağırmak için “onclick” olayına sahip düğmeyi temsil eder. - “ ” etiketi, uygulanan “innerHeight” özelliğinin döndürülen değerini görüntülemek için “para” kimliği atanmış boş bir paragraf ekler.
JavaScript Kodu
Şimdi, aşağıda verilen kod ile devam edin:
< senaryo >işlev jsFunc ( ) {
izin vermek h = pencere.iç Yükseklik;
Document.getElementById ( 'için' ) .innerHTML = 'Pencerenin iç Yüksekliği: ' + sa;
}
senaryo >
Yukarıdaki kod satırlarında:
- İlk olarak, “adlı bir işlev tanımlayın. jsFunc() ”.
- Tanımında “h” değişkeni “ iç Yükseklik 'window' nesnesini kullanan özellik.
- Bundan sonra, “ getElementById() 'para' kimliğini kullanarak eklenen boş paragrafı almak ve mevcut tarayıcı penceresinin iç yüksekliğini burada görüntülemek için yöntem.
Çıktı
Yukarıdaki çıktıda gösterildiği gibi, geçerli tarayıcı penceresi görüntü alanı yüksekliğini (iç yükseklik) gösterir, yani, ' 599 piksel ” düğmesine tıklandığında.
Örnek 2: Birleşik Pencere “innerHeight” ve “innerWidth” Özelliklerinin Uygulanması
“innerHeight” özelliği, “innerWidth”, “outerWidth”, “outerHeight” vb. diğer boyut özelliklerinin yanında uygulanabilir. Bu senaryoda, “ iç Genişlik ' mülk.
HTML Kodu
Değiştirilen HTML koduna bir göz atalım:
< h2 > Pencere innerHeight ve innerWidth Özellikleri h2 >< düğme tıklamada = 'jsFunc()' > Yükseklik ve Genişlik Alın düğme >
< P İD = 'için' > P >
Burada '