כדי ליצור עיצובי דפי אינטרנט דינמיים ומושלמים לפיקסלים, מדידות של גודל החלון הן קריטיות מאוד להבנה ולשימוש. ייתכן שלא תיווצר פריסת דף האינטרנט הרצויה אם המדידה של החלון לא נלקחת או לא נעשה בה שימוש נכון. למרבה הצער, HTML/CSS לא סיפק שום תכונה או נכס כדי לקבל ידע מדויק על גודל מסך החלון והמרחק של החלון מגבולות המסך המקוריים.
לְמַרְבֶּה הַמַזָל! JavaScript פותר בעיה זו על ידי מתן ' window.screenLeft' ו-'window.screenTop ' מאפיינים למדידת מיקום החלון בשני ה' x' ו-'ציר y ' בהתאמה. ההתמקדות העיקרית שלנו במאמר זה היא לקבל עמדה לאורך ציר ה-X בעזרת ה-' window.screen משמאל ' תכונה. אז הבה נתחיל!
בלוג זה יסביר את ההליך לשימוש או גישה למאפיין window.screenLeft ב-JavaScript.
כיצד לגשת למאפיין 'window.screenLeft' ב-JavaScript?
ה ' window.screen משמאל ” המאפיין של JavaScript מחזיר את המידע הקשור למיקום האופקי של חלון, ביחס למסך. מאפיין זה מחזיר את הערך המספרי בפורמט פיקסל, המציג את המרחק האופקי של החלון מהמסך. בקר בקוד שלהלן, שבו ' window.screen משמאל הנכס נמצא בשימוש:
< גוּף >
< h1 סִגְנוֹן = 'צבע: ירוק ים;' > לינוקס < / h1 >
< ע תְעוּדַת זֶהוּת = 'יַעַד' > < / ע >
< תַסרִיט >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'משמאל: ' + i;
< / תַסרִיט >
< / גוּף >
תיאור הקוד לעיל:
- ראשית, ה-HTML ' ע אלמנט ' נוצר עם מזהה של ' יַעַד '.
- לאחר מכן, ה' window.screen משמאל 'מאפיין משמש בתוך '< תַסרִיט >' תג ומאחסן את התוצאה במשתנה ' אני '.
- לאחר מכן, בחר את הרכיב עם המזהה של ' יַעַד והכנס את הערך של ' משתנה i' באמצעות ה-' innerHTML ' תכונה.
התצוגה המקדימה של דף האינטרנט היא כדלקמן:
הפלט מראה שהמרחק האופקי מגבול המסך השמאלי הוא אפס פיקסלים.
דוגמה: אחזור דינמי של הערך האופקי
ניתן להשתמש במאפיין screenLeft יחד עם ' שנה גודל 'מאזין אירועים כדי לספק את המיקום בזמן אמת של החלון המתאים למסך לאורך ציר ה-x. באותו אופן, ניתן לאחזר את המיקום לאורך ציר ה-y או הציר האנכי גם על ידי שימוש ב-' window.screenTop ' תכונה. בוא יהיה קוד לתרחיש הנתון:
< גוּף >< h1 סִגְנוֹן = 'צבע: ירוק ים;' > Linuxhint < / h1 >
< ע תְעוּדַת זֶהוּת = 'מִבְחָן' >< / ע >
< תַסרִיט >
פונקציה דינמית ( ) {
תן לי = window.screenLeft;
תן י = window.screenTop;
document.getElementById ( 'מִבְחָן' ) .innerHTML = 'עמדה מכיוון שמאל:' + i + ', מהכיוון העליון: ' + j;
}
window.addEventListener ( 'שנה גודל' , דינמי ) ;
< / תַסרִיט >
ההסבר של הקוד לעיל הוא כדלקמן:
- ראשית, הרכיב הממוקד נוצר עם מזהה של ' מִבְחָן '.
- לאחר מכן, הסימן '< תַסרִיט תג >' משמש, וה-' דִינָמִי ()' נוצרת בו.
- בתוך הפונקציה, השתמש ב' window.screenLeft' ו-'window.screenTop ' נכסים ואחסן אותם ב' i' ו-'j ' משתנים בהתאמה.
- לאחר מכן, בחר את הרכיב הממוקד על ידי קבלת המזהה שלו ' מִבְחָן ' ובעזרת ' innerHTML ' מאפיין מציג את הערכים עבור שניהם ' i' ו-'j ' משתנים על פני דף האינטרנט.
- בסופו של דבר, צרף את ' שנה גודל מאזין אירועים עם ה-' חַלוֹן ' המעורר את ' דִינָמִי ()' פונקציה בכל פעם כאשר גודל החלון משתנה.
תצוגה מקדימה של דף האינטרנט לאחר סיום הקומפילציה:
בפלט לעיל, ההבדל בין החלון מהצד העליון והצד השמאלי מתקבל בפיקסלים עם שינוי גודל החלון.
זה הכל לגבי ' window.screeLeft נכס ב-JavaScript.
סיכום
כדי לגשת ל' window.screen משמאל ' מאפיין ב-JavaScript וצרף את ' שנה גודל 'מאזין אירועים ל' חַלוֹן '. זה מפעיל את פונקציית ההתקשרות חזרה בכל פעם שגודל החלון משתנה. בתוך פונקציה זו, צור משתנה המאחסן את ' window.screen משמאל ' תכונה. יתר על כן, אחזר את ההפניה של האלמנט הממוקד והצג מעליו את ערכי המשתנה הזה. בלוג זה הסביר את התהליך לגישה למאפיין window.screenLeft ב-JavaScript.