ה offsetHeight הוא מאפיין HTML DOM, המשמש את שפת התכנות JavaScript. הוא מחזיר את הגובה הגלוי של אלמנט בפיקסלים הכולל את גובה התוכן הגלוי, הגבול, הריפוד ופס הגלילה אם קיימים. לעתים קרובות נעשה שימוש ב-offsetHeight עם המאפיין offsetWidth. ה offsetWidth הוא מאפיין אחד נוסף של HTML DOM, שהוא כמעט זהה ל-offsetHeight. מאפיינים אלה משמשים את JavaScript כדי למצוא את הגובה והרוחב הנראים של רכיבי HTML.
ה-offsetHeight הוא שילוב של רכיבי HTML הבאים:
offsetHeight = height + border + padding + horizontal scrollbar
מצד שני, offsetWidth כולל את האלמנטים הבאים:
offsetWidth = width + border + padding + vertical scrollbar
זכור דבר אחד ש-offsetHeight ו-offsetWidth אינם כוללים שוליים, לא שוליים עליונים ולא שוליים תחתונים. מאפייני DOM אלה משמשים את שפת תכנות JavaScript כדי לחשב את הממד של רכיבי HTML בפיקסלים.
בעזרת הדיאגרמה שלהלן תוכל להבין את offsetHeight ואת offsetWidth הרבה יותר טוב:
תמיכה בדפדפן
המאפיין offsetHeight DOM נתמך על ידי מספר דפדפני אינטרנט, כמו Chrome ו-Internet Explorer. להלן כמה דפדפנים התומכים במאפייני offsetHeight ו-offsetWidth.
| דפדפן |  כרום |  אינטרנט אקספלורר |  פיירפוקס |  אוֹפֵּרָה |  ספארי |  קָצֶה |
| תמיכה ב- offsetHeight | כן | כן | כן | כן | כן | כן |
תחביר
להלן תחביר פשוט של offsetHeight:
element.offsetHeight
כאן, אלמנט הוא משתנה שנוצר ב-JavaScript כדי להחזיק את ערכי מאפייני ה-CSS או פסקת טקסט HTML.
החזר ערכים
ה-offsetHeight ו-offsetWidth מחזירים את הגובה והרוחב המחושבים של רכיבי HTML בפיקסלים, בהתאמה.
דוגמאות
להלן רשימה של כמה דוגמאות. בעזרתו נראה כיצד נעשה שימוש ועובד בנכס offsetHeight.
דוגמה 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit תְפוּקָה
ראה את הפלט שלהלן המכיל פסקה בצבע צהוב מודגש, וכפתור שלח. לחץ על זה שלח לחצן ולחשב את offsetHeight של פסקה זו.
שווה שיטת java
פלט לפני לחיצה על כפתור שלח
פלט לאחר לחיצה על כפתור שלח
ה-offsetHeight המחושב יוצג בתוך האזור המודגש הצהוב הזה.
דוגמה 2
בדוגמה זו, נחשב את offsetHeight עבור פסקה שסופקה בדוגמה זו יחד עם סגנון CSS. זכור שה-offsetHeight לא יכלול שוליים.
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight תְפוּקָה
ראה את הפלט למטה המכיל פסקה בצבע ורוד מודגש וכפתור שלח. לחץ על זה חשב offsetHeight לחצן ולחשב את offsetHeight של פסקה זו.
פלט לפני לחיצה על כפתור Calculate offsetHeight
פלט לאחר לחיצה על כפתור Calculate offsetHeight
ה-offsetHeight המחושב יוצג בתוך האזור המודגש הוורוד הזה. בצילום המסך למטה, אתה יכול לראות ש-offsetHeight עבור הפסקה הנתונה הוא 230 פיקסלים.
דוגמה 3 ללא עיצוב CSS
ראה דוגמה נוספת לחישוב ה-offsetHeight. לא כללנו שום סגנון CSS כמו גובה, רוחב, שוליים, ריפוד וכו', צפו לצבע רקע. לכן, הפסקה תהיה פסקה פשוטה ללא סגנון.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight תְפוּקָה
ראה את הפלט שלהלן המכיל פסקה בצבע כתום מודגש וכפתור הגשה כדי לחשב את offsetHeight. לחץ על זה חשב offsetHeight לחצן ולחשב את offsetHeight של פסקה זו.
לפני לחיצה על כפתור Calculate offsetHeight
פקטורי ב-ג
לאחר לחיצה על כפתור Calculate offsetHeight
בצילום המסך למטה, אתה יכול לראות ש-offsetHeight עבור הפסקה הנתונה הוא 88px.
חשב גם offsetHeight וגם offsetWidth
בדוגמה זו, נחשב את שניהם offsetHeight ו offsetWidth עבור פסקה בתוך לשונית div. אז אתה יכול להבין כמה שונה הם חישבו. כאן, נשתמש ב-CSS ונעביר את הגובה, הרוחב, השוליים, הריפוד וכו' לסטיילינג בדוגמה זו.
העתק והפעל את הקוד שלהלן במערכת שלך כדי להבין טוב יותר.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit תְפוּקָה
ראה את הפלט שלהלן המכיל פסקה באזור צבע מודגש בצבע תכלת וכפתור שלח. לחץ על זה שלח לחצן ולחשב את offsetHeight ואת offsetWidth של פסקה זו.
פלט לפני לחיצה על כפתור שלח
לאחר לחיצה על שלח כפתור, offsetHeight המחושב הוא 210px, ו-offsetWidth הוא 430px המוצג בתוך האזור המודגש הזה בכחול בהיר. ראה את הפלט למטה.
פלט לאחר לחיצה על כפתור שלח
ראית מספר דוגמאות בעלות פרמטרי חישוב שונים. בדוגמאות השונות הללו, העברנו את פסקת הטקסט עם או גם בלי סגנון CSS ולאחר מכן חישבנו בנפרד את offsetHeight ואת offsetWidth.