בלוג זה מדגים את השימוש באלמנט DOM גובה הלקוח ב-HTML.
כיצד להשתמש ברכיב DOM 'clientHeight' ב-HTML?
ה ' גובה הלקוח נכס מאפשר למפתחים לחשב את גובה התוכן הגלוי של אלמנט. זה עוזר במיקום אלמנטים ביחס זה לזה או בקביעה אם משתמש גלל לקצה הימני של מיכל שניתן לגלול. זה גם מספק מידע על השטח שנותר שאינו בשימוש בדף האינטרנט.
דוגמא
הבה נעבור על דוגמה להדגמה טובה יותר של המאפיין 'clientHeight'. למשל, ה' בלחיצה מאזין אירועים משמש כדי להציג את התוצאה המסופקת על ידי ' גובה הלקוח ' תכונה:
< גוּף >
< h2 תְעוּדַת זֶהוּת = 'אֵלֵמֶנט' >< / h2 >
< h2 תְעוּדַת זֶהוּת = 'אֵלֵמֶנט' בלחיצה = 'showelementHeight()' >
לחץ על מאמר Linuxhint כדי להציג גובה!
< / h2 >
< תַסרִיט >
function showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('הגובה הוא: ' + elementHeight + ' פיקסלים.');
}
< / תַסרִיט > >
< / גוּף >
ההסבר של קטע הקוד לעיל מתואר להלן:
- בתחילה, צור ' 'תג בתוך ' <גוף> 'תייגו וספקו לו כמה נתוני דמה. כמו כן, הקצה מזהה של ' אֵלֵמֶנט ' לרכיב ה-HTML שנבחר.
- לאחר מכן, הוסף ' בלחיצה() 'מאזין אירועים שמפעיל את ' showelementHeight() הפונקציה ' כאשר המשתמש לוחץ על ' ' אלמנט.
- ואז, בתוך ' showelementHeight() הפונקציה ' יוצרת משתנה בשם ' דוגמא ' אשר פועל כמופע עבור רכיב ה-HTML בעל המזהה של ' אֵלֵמֶנט '.
- לאחר מכן, צור משתנה נוסף בשם ' elementHeight '' המאחסן את התוצאה שסופקה על ידי המאפיין 'clientHeight'.
- לאחר מכן, הצג את ' elementHeight '' משתנה בתיבת ההתראה באמצעות ' עֵרָנִי() ' שיטה.
בסופו של דבר, הוסף את מאפייני ה-CSS הבאים לעיצוב ה' h2 ' אלמנט:
< סִגְנוֹן >
#אֵלֵמֶנט {
שוליים: 20px;
ריפוד: 10px;
רקע כללי- צֶבַע : darkcyan;
גוֹבַה : 300px;
טֶקסט- ליישר : מרכז;
קַו- גוֹבַה : 100px;
}
< / סִגְנוֹן >
בקטע הקוד שלמעלה, מאפייני ה-CSS הבאים מוקצים ל-div בעל המזהה ' אֵלֵמֶנט ”:
- ה ' 20 פיקסלים ', ' 10 פיקסלים ' ו' darkcyan ' ערכי מסופקים ל-CSS ' שולים ', ' ריפוד ' ו' צבע רקע ” נכסים, בהתאמה.
- משתמש גם ב' גוֹבַה ', ' יישור טקסט ' ו' גובה קו ' מאפייני CSS לשיפור נראות המשתמש.
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך:
הפלט מציג שגובה האלמנט הנבחר מוצג בתיבת ההתראה, בכל פעם שהמשתמש לוחץ על האלמנט.
סיכום
כדי להשתמש ב' גובה הלקוח ' מאפיין ב-HTML, בחר את רכיב ה-HTML על ידי גישה לתכונה id. לאחר מכן, צרף את המאפיין 'clientHeight' והצג את התוצאה. זהו מאפיין לקריאה בלבד ומחזיר את התוצאה בפיקסלים. המאפיין 'clientHeight' פועל בתוך התג '