A setAttribute() metódus egy attribútum beállítására vagy hozzáadására szolgál egy adott elemhez, és értéket ad neki. Ha az attribútum már létezik, akkor csak az attribútum értékét állítja be vagy módosítja. Tehát használhatjuk a setAttribute() módszerrel frissítheti a meglévő attribútum értékét. Ha a megfelelő attribútum nem létezik, akkor létrehoz egy új attribútumot a megadott névvel és értékkel. Ez a metódus nem ad vissza semmilyen értéket. Az attribútum neve automatikusan kisbetűssé alakul, ha egy HTML elemen használjuk.
Bár hozzátehetjük a stílus attribútum használatával setAttribute() módszerrel, de nem ajánlatos ezt a módszert használni a formázáshoz. Stílusok hozzáadásához használhatjuk a stílusobjektum tulajdonságait, amelyek hatékonyan megváltoztatják a stílust. Ez egyértelmű a következő kóddal.
Helytelen út
Javasoljuk, hogy ne használja a stílus megváltoztatására.
element.setAttribute('style', 'background-color: blue;');
Helyes út
A stílus megváltoztatásának helyes módja az alábbiakban található.
element.setAttribute.backgroundColor = 'blue';
Egy attribútum értékének meghatározásához használhatjuk a getAttribute() metódust, és egy adott attribútum eltávolításához egy elemből használhatjuk a RemoveAtrribute() módszer.
Ha egy logikai attribútumot adunk hozzá, mint pl Tiltva , akkor bármilyen értékkel is bír, mindig annak tekintendő igaz . Ha a Boolean attribútum értékét erre kell beállítani hamis , el kell távolítanunk a teljes attribútumot a RemoveAttribute() módszer .
Szintaxis
element.setAttribute(attributeName, attributeValue)
Ennek a módszernek az érvei nem opcionálisak. Ennek a módszernek a használatakor mindkét paramétert szerepeltetni kell. Ennek a módszernek a paraméterértékei a következők.
Paraméterértékek
attribútumnév: Ez annak az attribútumnak a neve, amelyet hozzá szeretnénk adni egy elemhez. Nem lehet üresen hagyni; azaz nem kötelező.
react inline stílusban
attribútumérték: Ez annak az attribútumnak az értéke, amelyet egy elemhez adunk. Ez sem opcionális érték.
Megértjük, hogyan kell használni setAttribute() módszert néhány illusztráció segítségével.
Példa1
Ebben a példában hozzáadjuk a href attribútum értékével 'https://www.javatpoint.com/' hoz címkével id = 'link' .
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <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 Tesztelje most Kimenet
A fenti kód végrehajtása után a kimenet a következő lesz:
Láthatjuk, hogy az adott gombra kattintás előtt a hivatkozás nem jön létre. A gombra kattintás után a kimenet a következő lesz:
Most láthatjuk, hogy a link létrejött.
Példa2
Ebben a példában egy meglévő attribútum értékét frissítjük a setAttribute() módszer. Itt egy szövegmezőt gombpá alakítunk át az értékének megváltoztatásával típus attribútumot szöveg nak nek gomb .
A hatás megtekintéséhez rá kell kattintanunk a megadott gombra.
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change Tesztelje most Kimenet
A fenti kód végrehajtása után a kimenet a következő lesz:
A gombra kattintás után a kimenet a következő lesz:
Példa3
Itt adunk hozzá egy logikai attribútumot Tiltva a megadott gomb letiltásához. Ha beállítjuk az értékét Tiltva attribútumot egy üres karakterlánchoz, akkor automatikusan igazra állítja, ami a gomb letiltását okozza.
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me Tesztelje most Kimenet
A fenti kód végrehajtása után a kimenet a következő lesz:
A gombra kattintás után a kimenet a következő lesz:
