בלוג זה ידון בפונקציונליות של ביטוי ה-href המוצהר ' '.
מה עושה ביטוי href ' '?
תכונת href ב-HTML ' ' תג מציין בדרך כלל את כתובת האתר או דף האינטרנט שאליו הקישור מכוון.
במקרה של ' ', תכונת href מוגדרת ל' javascript:; ” שהוא ערך מציין מיקום שאינו עושה דבר כאשר לוחצים עליו. זה משמש לעתים קרובות כאשר הקישור משמש עבור פונקציה או אירוע JavaScript ואינו צריך להפנות את המשתמש לדף חדש.
ה ' javascript:; 'היא התכונה המרשימה ביותר של JavaScript כדי לשלב אותה עם HTML ו-CSS. זה עוזר לקרוא לפונקציות JavaScript בתג HTML href או עוגן.
דוגמא
בדוגמה הנתונה, הצג את התמונה בעמוד הנוכחי על ידי לחיצה על הקישור באמצעות ' javascript:; ' בתכונת href שתמנע מהדפדפן לצאת מהדף הנוכחי:
< מזהה div = 'התמונה שלי' > div >
< a href = 'javascript: img = document.createElement('img');
img.src = 'sun.jpg';
src = document.getElementById('myImg');
src.appendChild(img);' > הצג תמונה א >
בקוד למעלה:
- ראשית, צור רכיב div בקובץ ה-HTML, והקצה מזהה ' myImg '.
- הגדר את תכונת href ל' javascript:; ' וליצור ' img ' אלמנט באמצעות ' createElement() ' שיטה.
- ה ' src ' תכונה תציין את הנתיב של התמונה.
- קבל את ההפניה של רכיב התמונה בקובץ ה-HTML כדי להציג את התמונה באמצעות ' getElementById() ' שיטה.
- הוסף את התמונה כרכיב צאצא באמצעות ' appendchild() ' שיטה.
הפלט מציין שהתמונה תוצג באותו עמוד תוך כדי לחיצה על הקישור:
אתה יכול גם לגשת לפונקציה בתג href עם ' javascript:; 'מציין מיקום:
< מזהה div = 'התמונה שלי' > div >< a href = 'javascript:myFunction();' > לחץ עלי א >
הגדר פונקציה ' myFunction() ' בתג