El setAttribute() El mètode s'utilitza per establir o afegir un atribut a un element determinat i li proporciona un valor. Si l'atribut ja existeix, només estableix o canvia el valor de l'atribut. Per tant, també podem utilitzar el setAttribute() mètode per actualitzar el valor de l'atribut existent. Si l'atribut corresponent no existeix, crearà un nou atribut amb el nom i el valor especificats. Aquest mètode no retorna cap valor. El nom de l'atribut es converteix automàticament en minúscules quan l'utilitzem en un element HTML.
Encara que podem afegir el estil atribut utilitzant el setAttribute() mètode, però es recomana no utilitzar aquest mètode per estilitzar. Per afegir estils, podem utilitzar les propietats de l'objecte d'estil que canviaran efectivament l'estil. Pot quedar clar amb el següent codi.
Manera incorrecta
Es recomana no utilitzar-lo per canviar l'estil.
element.setAttribute('style', 'background-color: blue;');
Manera correcta
A continuació es mostra la manera correcta de canviar l'estil.
patró de disseny del constructor
element.setAttribute.backgroundColor = 'blue';
Per obtenir el valor d'un atribut, podem utilitzar el getAttribute() mètode, i per eliminar un atribut específic d'un element, podem utilitzar el removeAtrribute() mètode.
Si estem afegint un atribut booleà com ara discapacitat , llavors sigui quin sigui el valor que tingui, sempre es considera com veritat . Si necessitem establir el valor de l'atribut booleà a fals , hem d'eliminar tot l'atribut utilitzant el removeAtribute() mètode .
Sintaxi
element.setAttribute(attributeName, attributeValue)
Els arguments d'aquest mètode no són opcionals. Ambdós paràmetres s'han d'incloure quan s'utilitza aquest mètode. Els valors dels paràmetres d'aquest mètode es defineixen de la següent manera.
Valors dels paràmetres
attributeName: És el nom de l'atribut que volem afegir a un element. No es pot deixar buit; és a dir, no és opcional.
attributeValue: És el valor de l'atribut que estem afegint a un element. Tampoc és un valor opcional.
Entenem com utilitzar-lo setAttribute() mètode utilitzant algunes il·lustracions.
Exemple 1
En aquest exemple, estem afegint a href atribut amb un valor de 'https://www.javatpoint.com/' fins al etiqueta amb id = 'enllaç' .
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 Prova-ho ara Sortida
Després de l'execució del codi anterior, la sortida serà -
tutorial de react js
Podem veure que abans de fer clic al botó donat, l'enllaç no es crea. Després de fer clic al botó, la sortida serà -
Ara, podem veure que l'enllaç està creat.
Exemple 2
En aquest exemple estem actualitzant el valor d'un atribut existent mitjançant l' setAttribute() mètode. Aquí, estem convertint un camp de text en un botó canviant el valor de tipus atribut de text a botó .
Hem de fer clic al botó especificat per veure l'efecte.
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 Prova-ho ara Sortida
cast int a cadena java
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó, la sortida serà -
Exemple 3
Aquí, estem afegint un atribut booleà discapacitat per desactivar el botó especificat. Si posem el valor de la discapacitat atribut a una cadena buida, aleshores s'estableix automàticament com a vertader, cosa que fa que el botó es desactivi.
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 Prova-ho ara Sortida
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó, la sortida serà -
