הגובה והרוחב הם הממדים המשמעותיים ביותר בעת עיצוב הפריסה של דף אינטרנט.
ה'גובה' מציין את מדידת אורך האובייקט מלמעלה למטה, בעוד שה'רוחב' מציין כמה רחב עצם מצד אחד לצד השני. גורמים אלו מסייעים בהתאמת ההקצאה של אובייקט בחלון. ב-JavaScript, ה' גוֹבַה 'ו' רוֹחַב ' מאפיינים מסווגים עוד לשתי קטגוריות 'פנימי' כלומר, 'גובה פנימי/רוחב פנימי', ו'חיצוני' כלומר 'גובה חיצוני/רוחב חיצוני', בהתאמה.
כתיבה זו מרחיבה את המטרה והפעולה של מאפיין 'innerHeight' של Window ב-JavaScript.
מה עושה מאפיין 'innerHeight' של החלון ב-JavaScript?
ה ' גובה פנימי ' מאפיין משויך לאובייקט 'חלון' המאחזר את גובה יציאת התצוגה של חלון הדפדפן למעט סרגל המיקום, סרגל הכלים, שורת התפריטים ואחרים. כמו כן, הוא כולל את גובה פס הגלילה האופקי אם הוא כלול. הערך המוחזר של מאפיין זה נלקח מחלון 'תצוגה פריסה', כלומר, אזור המציג את תוכן דף האינטרנט.
תחביר בסיסי
window.innerHeight או innerHeight
על פי התחביר לעיל, ה' גובה פנימי ניתן להחיל בקלות ישירות או באמצעות האובייקט 'חלון'.
בואו ליישם את המאפיין שהוגדר לעיל באופן מעשי בעזרת התחביר הבסיסי שלו.
דוגמה 1: החלת המאפיין 'innerHeight' של החלון כדי להחזיר את גובה יציאת התצוגה של חלון הדפדפן
דוגמה זו משתמשת במאפיין 'innerHeight' עם האובייקט 'window' כדי לאחזר את גובה התצוגה של חלון הדפדפן.
קוד HTML
ראשית, עיין בקוד המפורט להלן:
< h2 > נכס חלון innerHeight h2 >< לַחְצָן בלחיצה = 'jsFunc()' > קבל גובה לַחְצָן >
< ע תְעוּדַת זֶהוּת = 'ל' > ע >
בשורות הקוד לעיל:
- ה ' 'תג מגדיר את כותרת המשנה ברמה 2.
- ה ' <כפתור> 'תג מייצג את הכפתור בעל אירוע 'onclick' כדי להפעיל את הפונקציה 'jsFunc()' כאשר האירוע מופעל.
- ה ' 'תג מוסיף פסקה ריקה עם מזהה שהוקצה 'para' כדי להציג את הערך המוחזר של המאפיין 'innerHeight' שהוחל.
קוד JavaScript
כעת, המשך עם הקוד הנתון להלן:
< תַסרִיט >פוּנקצִיָה jsFunc ( ) {
לתת h = window.innerHeight;
document.getElementById ( 'ל' ) .innerHTML = 'הגובה הפנימי של החלון:' + h;
}
תַסרִיט >
בשורות הקוד לעיל:
- ראשית, הגדר פונקציה בשם ' jsFunc() '.
- בהגדרתו, המשתנה 'h' מחיל את ' גובה פנימי ' מאפיין באמצעות האובייקט 'חלון'.
- לאחר מכן, החל את ' getElementById() ' השיטה כדי לקבל את הפסקה הריקה שנוספה באמצעות המזהה שלה 'para' ולהציג את הגובה הפנימי של חלון הדפדפן הנוכחי בו.
תְפוּקָה
כפי שמוצג בפלט לעיל, חלון הדפדפן הנוכחי מציג את גובה יציאת התצוגה (גובה פנימי) כלומר, ' 599 פיקסלים ' בלחיצת כפתור.
דוגמה 2: החלת המאפיינים המשולבים של החלון 'innerHeight' ו-'innerWidth'
ניתן ליישם את המאפיין 'innerHeight' לצד מאפייני הממדים האחרים כגון 'innerWidth', 'outerWidth', 'outerHeight' וכו'. בתרחיש זה, הוא משמש לצד ' innerWidth ' תכונה.
קוד HTML
בואו לקבל סקירה כללית של קוד ה-HTML שהשתנה:
< h2 > מאפייני חלון פנימי גובה ורוחב פנימי h2 >< לַחְצָן בלחיצה = 'jsFunc()' > קבל גובה ורוחב לַחְצָן >
< ע תְעוּדַת זֶהוּת = 'ל' > ע >
כאן, התוכן של הרכיבים '