ה setAttribute() השיטה משמשת להגדרה או הוספת תכונה לאלמנט מסוים ומספקת לו ערך. אם התכונה כבר קיימת, היא רק מגדירה או משנה את הערך של התכונה. אז, אנחנו יכולים גם להשתמש ב setAttribute() שיטה לעדכון הערך של התכונה הקיימת. אם התכונה המתאימה לא קיימת, היא תיצור תכונה חדשה עם השם והערך שצוינו. שיטה זו אינה מחזירה שום ערך. שם התכונה הופך אוטומטית לאותיות קטנות כאשר אנו משתמשים בו ברכיב HTML.

פקודת zip בלינוקס

למרות שאנו יכולים להוסיף את סִגְנוֹן תכונה באמצעות ה setAttribute() שיטה, אך מומלץ לא להשתמש בשיטה זו לסטיילינג. להוספת סגנונות, נוכל להשתמש במאפיינים של אובייקט הסגנון שישנו למעשה את הסגנון. זה יכול להיות ברור עם הקוד הבא.

דרך לא נכונה

מומלץ לא להשתמש בו כדי לשנות את הסגנון.

 element.setAttribute('style', 'background-color: blue;'); 

דרך נכונה

הדרך הנכונה לשנות את הסגנון ניתנת להלן.

 element.setAttribute.backgroundColor = 'blue'; 

כדי לקבל את הערך של תכונה, נוכל להשתמש ב- getAttribute() שיטה, וכדי להסיר תכונה ספציפית מאלמנט, נוכל להשתמש ב- removeAttribute() שיטה.

אם אנחנו מוסיפים תכונה בוליאנית כגון נָכֶה , אז לא משנה מה הערך שיש לו, זה תמיד נחשב כ נָכוֹן . אם נצטרך להגדיר את הערך של התכונה הבוליאנית ל שֶׁקֶר , עלינו להסיר את כל התכונה באמצעות ה removeAttribute() שיטה .

תחביר

 element.setAttribute(attributeName, attributeValue) 

הטיעונים של שיטה זו אינם אופציונליים. יש לכלול את שני הפרמטרים בעת שימוש בשיטה זו. ערכי הפרמטרים של שיטה זו מוגדרים כדלקמן.

ערכי פרמטרים

שם מאפיין: זה השם של התכונה שאנחנו רוצים להוסיף לאלמנט. אי אפשר להשאיר אותו ריק; כלומר, זה לא אופציונלי.

attributeValue: זהו הערך של התכונה שאנו מוסיפים לאלמנט. זה גם לא ערך אופציונלי.

בואו נבין איך להשתמש setAttribute() שיטה באמצעות כמה איורים.

דוגמה1

בדוגמה זו, אנו מוסיפים את א href תכונה עם ערך של 'https://www.javatpoint.com/' אל ה לתייג עם id = 'קישור' .

 JavaScript setAttribute() method function fun() { document.getElementById(&apos;link&apos;).setAttribute(&apos;href&apos;, &apos;https://www.javatpoint.com/&apos;); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute 

תְפוּקָה

לאחר ביצוע הקוד לעיל, הפלט יהיה -

אנו יכולים לראות שלפני לחיצה על הכפתור הנתון, הקישור לא נוצר. לאחר לחיצה על הכפתור, הפלט יהיה -

כעת, אנו יכולים לראות שהקישור נוצר.

דוגמה2

בדוגמה זו אנו מעדכנים את הערך של תכונה קיימת באמצעות ה- setAttribute() שיטה. כאן, אנו ממירים שדה טקסט לכפתור על ידי שינוי הערך של סוּג תכונה מ טֶקסט ל לַחְצָן .

מעבר עצים

עלינו ללחוץ על הכפתור שצוין כדי לראות את האפקט.

 JavaScript setAttribute() method function fun() { document.getElementById(&apos;change&apos;).setAttribute(&apos;type&apos;, &apos;button&apos;); } <h2> It is an example to update an attribute&apos;s value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change 

תְפוּקָה

לאחר ביצוע הקוד לעיל, הפלט יהיה -

לאחר לחיצה על הכפתור, הפלט יהיה -

דוגמה3

כאן, אנו מוסיפים תכונה בוליאנית נָכֶה כדי להשבית את הכפתור שצוין. אם נגדיר את הערך של ה נָכֶה תכונה למחרוזת ריקה, אז היא מוגדרת אוטומטית ל-true מה שגורם לביטול הלחצן.

 JavaScript setAttribute() method function fun() { document.getElementById(&apos;btn&apos;).setAttribute(&apos;disabled&apos;, &apos;&apos;); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me 

תְפוּקָה

לאחר ביצוע הקוד לעיל, הפלט יהיה -

לאחר לחיצה על הכפתור, הפלט יהיה -