מהו ה-HTML DOM Element offsetTop Property ב-JavaScript

Mhw H Html Dom Element Offsettop Property B Javascript



רכיב ה-HTML DOM ' offsetTop ' המאפיין מעריך את המיקום העליון של רכיב ה-HTML שצוין המתאים למסמך. זהו מאפיין מיוחד לקריאה בלבד של HTML DOM שניתן להשתמש בו לעתים קרובות עם מאפייני היסט של JavaScript אחרים.

כתיבה זו מרחיבה את פעולת המאפיין 'offsetTop' ב-JavaScript.

כיצד פועל נכס HTML DOM 'offsetTop' ב-JavaScript?

ה ' offsetTop ' מאפיין עובד על רכיבי HTML ומחזיר את ה'שוליים', ה'ריפוד' העליון, 'הגבול' ו'סרגל הגלילה' גם של רכיב האב שלו.





תחביר



אֵלֵמֶנט. offsetTop

בתחביר זה, ' אֵלֵמֶנט ' מציין את המיקום העליון של רכיב ה-HTML המסוים ביחס לנקודת התצוגה (אזור ריק שבו מוצג תוכן דף האינטרנט).



הערה: הערך המוחזר כולל את הדברים הבאים:



  • המיקום העליון, והשוליים של האלמנט.
  • גבול עליון, פס גלילה וריפוד של ההורה.

בואו נשתמש בתחביר לעיל באופן מעשי.

דוגמה: החלת המאפיין 'offsetTop' כדי להעריך את המיקום העליון של HTML

דוגמה זו משתמשת ב' offsetTop ' מאפיין כדי לחשב את המיקום העליון של רכיב ה-HTML המסוים, כלומר, '

' כולל השוליים שלו בפיקסלים.



קוד HTML

ראשית, עבור על קוד ה-HTML הבא:

< מזהה div = 'Div1' סִגְנוֹן = 'top:20px; position: relative;margin:15px;border:3px blueviolet מוצק;text-align:center; padding:10px;' >

< ב > פרטים של זֶה div הם : ב >< br >

חלק עליון : 20 פיקסלים < br >

עמדה : קרוב משפחה < br >

טֶקסט - ליישר : מֶרְכָּז < br >

שולים : 15 פיקסלים < br >

גבול : 3 פיקסלים < br >

div >< br >

< כפתור בלחיצה = 'jsFunc()' > לחץ עליו לַחְצָן >

< p id = 'ל' > ע >

בקוד למעלה:

  • ה '
    אלמנט ' נוצר עם המזהה המוצהר 'Div1' לצד ' סִגְנוֹן ” מאפיין שמבצע את הסטיילינג האמור.
  • לאחר מכן, קטע הגוף של '
    ' מציין את המידע המוצהר.
  • לאחר מכן, צור כפתור באמצעות ' <כפתור> ' תג עם משויך ' בלחיצה ' אירוע לביצוע הפונקציה ' jsFunc() ' בלחיצה על הכפתור.
  • לבסוף, הוסף פסקה ריקה באמצעות '

    ' תג כדי להציג את המיקום העליון המחושב של האלמנט '

    '.

קוד JavaScript

כעת, שקול את קוד ה-JavaScript הנתון:

< תַסרִיט >

פונקציה jsFunc ( ) {

היה אלמנט = מסמך. getElementById ( 'Div1' ) ;

איפה txt = 'OffsetTop מחושב הוא: ' + elmnt. offsetTop + 'px
' ;

מסמך. getElementById ( 'ל' ) . innerHTML = טקסט ;

}

תַסרִיט >

בשורות הקוד לעיל:

  • הפונקציה מוגדרת בשם ' jsFunc() '.
  • בהגדרתו, המשתנה ' elmnt 'מוצהר עם ' היה ' מילת מפתח המשתמשת ב' getElementById() ' שיטה לגשת ל-'div' הכלול על ידי המזהה שלו ' Div1 '.
  • לאחר מכן, החל את ' offsetTop ' מאפיין במשתנה 'txt' כדי לחשב את המיקום העליון של ה-'div' שנלקח בפיקסלים.
  • לבסוף, ה-'getElementById()' מוחל שוב כדי לגשת לפסקה הריקה שנוספה ולצרף את ערך המיקום העליון המחושב של האלמנט '
    ' בפסקה באמצעות ' innerHTML ' תכונה.

תְפוּקָה

בתוצאה זו, ניתן לראות שהמיקום העליון של ה-div נתון (כולל שוליים), כלומר, ' 35 פיקסלים 'מחושב בהתאם להערה שצוינה (בתחילת הבלוג) ומוצגת בלחיצת הכפתור.

סיכום

JavaScript מספק את ' offsetTop ' מאפיין כדי לחשב את המיקום העליון של רכיב ה-HTML ביחס לנקודת התצוגה. הוא מחזיר את המיקום העליון המחושב של אלמנט כערך מספר שלם ב' פיקסלים '. כתיבה זו הדגים את המטרה, השימוש והיישום של מאפיין HTML DOM Element 'offsetTop' ב-JavaScript.

אַחֵר

קטגוריה

רשום פופולרי

כיצד להוריד מוזיקה לטלפון אנדרואיד שלך?

כיצד לרשום יציאות טוריות בלינוקס

מה זה AWK NF?

[נפתר] קוד שגיאת אתחול 0xc000000f ב-Windows 10

לולאת אירועים ב-node js

איך לגרום לעמודות להתחיל או להסתיים בקו הרשת ה-n' ב-Tailwind?

כיצד להשתמש ב-Out-File (Microsoft.PowerShell.Utility) Cmdlet ב-PowerShell?

10 פקודות רשת שימושיות עבור Raspberry Pi Linux

פנדות ממלאות את נאן ב-0

במה שונה Microsoft Sway מ-PowerPoint: מדריך השוואה?

כיצד להשתמש ב-AWS CLI ב-Windows

כיצד ליצור תגים בממשק המשתמש של GitLab?

שלח אימייל באמצעות Perl

כיצד להעביר טיעונים משורת הפקודה ב-Node.js?

כיצד ליישם את הפסקת קישוט הרחף על הקופסה ברוח גב?

מדריך שלם להגדרת DAKboard ב-Raspberry Pi דרך הדפדפן

שינוי זיכרון GPU ב-Raspberry Pi

קראנץ' עבור לינוקס

מהן ההגבלות והמגבלות של ה-S3 Bucket?

כיצד אוכל להעתיק ספרייה ממיכל למארח?