logo

JavaScript setAttribute()

De setAttribute() metoden brukes til å angi eller legge til et attributt til et bestemt element og gir en verdi til det. Hvis attributtet allerede eksisterer, setter eller endrer det bare verdien til attributtet. Så vi kan også bruke setAttribute() metode for å oppdatere det eksisterende attributtets verdi. Hvis det tilsvarende attributtet ikke eksisterer, vil det opprette et nytt attributt med det angitte navnet og verdien. Denne metoden returnerer ingen verdi. Attributtnavnet konverteres automatisk til små bokstaver når vi bruker det på et HTML-element.

Selv om vi kan legge til stil attributt ved å bruke setAttribute() metode, men det anbefales ikke å bruke denne metoden for styling. For å legge til stiler kan vi bruke egenskapene til stilobjektet som effektivt vil endre stilen. Det kan være tydelig med følgende kode.

Feil måte

Det anbefales å ikke bruke det til å endre stilen.

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

Riktig måte

Spørsmål til intervju med java språk

Den riktige måten å endre stilen på er gitt nedenfor.

 element.setAttribute.backgroundColor = 'blue'; 

For å få verdien av et attributt kan vi bruke getAttribute() metode, og for å fjerne et spesifikt attributt fra et element, kan vi bruke removeAttribute() metode.

justere bilder i css

Hvis vi legger til et boolsk attributt som f.eks funksjonshemmet , så uansett hvilken verdi den har, anses den alltid som ekte . Hvis vi trenger å sette verdien av det boolske attributtet til falsk , må vi fjerne hele attributtet ved å bruke removeAttribute() metode .

Syntaks

 element.setAttribute(attributeName, attributeValue) 

Argumentene for denne metoden er ikke valgfrie. Begge parameterne må inkluderes ved bruk av denne metoden. Parameterverdiene for denne metoden er definert som følger.

Parameterverdier

attributtName: Det er navnet på attributtet vi ønsker å legge til et element. Det kan ikke stå tomt; dvs. det er ikke valgfritt.

attributeValue: Det er verdien av attributtet vi legger til et element. Det er heller ikke en valgfri verdi.

La oss forstå hvordan du bruker setAttribute() metode ved å bruke noen illustrasjoner.

Eksempel 1

I dette eksemplet legger vi til en href attributt med en verdi på 'https://www.javatpoint.com/' til tagge med id = 'link' .

 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 
Test det nå

Produksjon

system.out.println

Etter utførelse av koden ovenfor, vil utgangen være -

JavaScript setAttribute()

Vi kan se at lenken ikke er opprettet før du klikker på den gitte knappen. Etter å ha klikket på knappen, vil utgangen være -

JavaScript setAttribute()

Nå kan vi se at koblingen er opprettet.

Eksempel 2

I dette eksemplet oppdaterer vi verdien til et eksisterende attributt ved å bruke setAttribute() metode. Her konverterer vi et tekstfelt til en knapp ved å endre verdien av type attributt fra tekst til knapp .

java arrayliste

Vi må klikke på den angitte knappen for å se effekten.

 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 
Test det nå

Produksjon

Etter utførelse av koden ovenfor, vil utgangen være -

JavaScript setAttribute()

Etter å ha klikket på knappen, vil utgangen være -

JavaScript setAttribute()

Eksempel 3

Her legger vi til et boolsk attributt funksjonshemmet for å deaktivere den angitte knappen. Hvis vi setter verdien av funksjonshemmet attributtet til en tom streng, blir den automatisk satt til sann, noe som fører til at knappen deaktiveres.

 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 
Test det nå

Produksjon

Oppgavebehandling linux

Etter utførelse av koden ovenfor, vil utgangen være -

JavaScript setAttribute()

Etter å ha klikket på knappen, vil utgangen være -

JavaScript setAttribute()