פוסט זה מתאר את העבודה והשימוש במאפיין 'תמונת רקע' בסגנון HTML DOM.
כיצד להשתמש בנכס 'תמונת רקע' בסגנון HTML DOM ב-JavaScript?
סגנון HTML DOM ' תמונת רקע 'מאפיין משמש להתאמה אישית של רכיב ה-HTML והמסמך על ידי הוספת תמונת רקע על ידי הפניה לנתיב שלו.
תחביר (הגדרת המאפיין 'תמונת רקע')
לְהִתְנַגֵד. סִגְנוֹן . תמונת רקע = 'url('URL')|none|initial|inherit'התחביר לעיל תומך בערכי המאפיינים הבאים של 'תמונת רקע':
- url('URL'): זה מציין את המיקום של תמונת הרקע הרצויה.
- אף אחד: הוא מייצג את ערך ברירת המחדל, כלומר, ללא תמונת רקע.
- התחלתי: זה דומה לערך ברירת המחדל של הדפדפן.
- לָרֶשֶׁת: הוא יורש את הנכס מאלמנט האב שלו.
תחביר (כתובת אתר חוזרת של המאפיין 'תמונת רקע')
לְהִתְנַגֵד. סִגְנוֹן . תמונת רקעתחביר זה מחזיר את ערך המחרוזת המכילה את כתובת האתר של תמונת הרקע שנוספה.
בואו נשתמש בתחבירים שהוגדרו לעיל באופן מעשי כדי להסביר את השימוש במאפיין הסגנון 'תמונת רקע'.
דוגמה 1: החל את מאפיין הסגנון 'תמונת רקע' כדי להגדיר את תמונת הרקע
דוגמה זו מיישמת את הסגנון ' תמונת רקע ' מאפיין כדי להגדיר את תמונת הרקע הרצויה למסמך על ידי ציון כתובת האתר שלו.
קוד HTML
ראשית, עיין בקוד ה-HTML המוצהר:
< h2 > להשתמש HTML DOM סִגְנוֹן נכס backgroundImage ב-JavaScript h2 >
< כפתור בלחיצה = 'myFunc()' > לחץ כאן לַחְצָן >
בקוד הזה:
- ה ' ' תג מוסיף את כותרת המשנה של רמה 2.
- ה ' <כפתור> ' תג יוצר כפתור עם ' מצורף ' בלחיצה ' אירוע לביצוע הפונקציה ' myFunc() ' בלחיצה על הכפתור.
קוד JavaScript
לאחר מכן, עקוב אחר קוד ה-JavaScript הנתון:
< תַסרִיט >פונקציה myFunc ( ) {
מסמך. גוּף . סִגְנוֹן . תמונת רקע = 'url('./html&css/image.jpg')' ;
}
תַסרִיט >
בקטע הקוד שלמעלה:
- הפונקציה בשם ' myFunc() ' מוגדר.
- בהגדרתו, ה' style.backgroundImage ' המאפיין מחיל את ' כתובת אתר תמונה לרקע של המסמך כולו.
תְפוּקָה
הפלט מראה שתמונת הרקע מתווספת לכל המסמך בלחיצת כפתור.
דוגמה 2: החל מאפיין 'תמונת רקע' בסגנון כדי להחזיר את כתובת האתר של תמונת הרקע
ה ' תמונת רקע ' מאפיין מועיל גם להחזרת כתובת האתר של תמונת הרקע. בוא נראה את זה באופן מעשי.
קוד HTML
ראשית, עבור על קוד ה-HTML הכתוב:
< h2 > להשתמש HTML DOM סִגְנוֹן נכס backgroundImage ב-JavaScript h2 >< מזהה div = 'myDiv' סִגְנוֹן = 'גובה: 500 פיקסלים; רוחב: 500 פיקסלים;
גבול: 3px שחור מלא;background-image:url('./html&css/image.jpg')' > זֶה הוא div div >
< h4 מזהה = 'הַדגָמָה' > h4 >
בגוש הקוד שלמעלה:
- ה ' תמונת רקע ' המאפיין משמש ברכיב '' שמוסיף תמונת רקע התואמת לכתובת האתר הנתונה.
- ה ' אלמנט ” יוצר כותרת משנה ריקה של רמה 4 המציגה את הערך המוחזר (URL) של תמונת הרקע שנוספה.
קוד JavaScript
כעת, המשך לקוד JavaScript:
< תַסרִיט >
תן img = מסמך. getElementById ( 'myDiv' ) . סִגְנוֹן . תמונת רקע ;
מסמך. getElementById ( 'הַדגָמָה' ) . innerHTML = img ;
תַסרִיט >בגוש קוד זה:
- הכריז על המשתנה ' img 'שמשתמש ב-' document.getElementById() ' שיטה לגשת לאלמנט '' דרך המזהה שלו 'myDiv' ולהחיל תמונת רקע באמצעות ' תמונת רקע ' תכונה.
- לאחר מכן, השיטה 'document.getElementById()' מביאה את כותרת המשנה הריקה באמצעות המזהה שלה 'הדגמה' כדי להציג את כתובת האתר של תמונת הרקע המצורפת.
תְפוּקָה
הפלט מציג את כתובת האתר של תמונת הרקע שהוחלה על האלמנט 'div'.
סיכום
JavaScript משתמש בסגנון ' תמונת רקע ” מאפיין להקצאת תמונת הרקע לרכיב ה-HTML הרצוי או להחזרת כתובת האתר שלו. הוא תומך בארבעה ערכי מאפיינים כדי להגדיר את תמונת הרקע, כולל 'ראשוני', 'ירושה', 'כתובת אתר' ו'אין'. עם זאת, הוא אינו תומך בשום ערך לקבלת כתובת האתר של תמונת הרקע. פוסט זה סיפק תיאור קצר לשימוש במאפיין 'תמונת רקע' בסגנון HTML DOM ב-JavaScript.