De setAttribute() metod används för att ställa in eller lägga till ett attribut till ett visst element och ger ett värde till det. Om attributet redan finns ställer eller ändrar det bara värdet på attributet. Så vi kan också använda setAttribute() metod för att uppdatera det befintliga attributets värde. Om motsvarande attribut inte finns kommer det att skapa ett nytt attribut med det angivna namnet och värdet. Denna metod returnerar inget värde. Attributnamnet konverteras automatiskt till gemener när vi använder det på ett HTML-element.
Även om vi kan lägga till stil attribut med hjälp av setAttribute() metod, men det rekommenderas att inte använda denna metod för styling. För att lägga till stilar kan vi använda egenskaperna för stilobjektet som effektivt kommer att ändra stilen. Det kan vara tydligt med följande kod.
Felaktigt sätt
Det rekommenderas att inte använda det för att ändra stilen.
element.setAttribute('style', 'background-color: blue;');
Rätta vägen
Det korrekta sättet att ändra stilen anges nedan.
java medan skick
element.setAttribute.backgroundColor = 'blue';
För att få värdet av ett attribut kan vi använda getAttribute() metod och för att ta bort ett specifikt attribut från ett element kan vi använda removeAttribute() metod.
Om vi lägger till ett booleskt attribut som t.ex Inaktiverad , oavsett värdet det har, anses det alltid som Sann . Om vi behöver ställa in värdet på det booleska attributet till falsk måste vi ta bort hela attributet med hjälp av removeAttribute() metod .
Syntax
element.setAttribute(attributeName, attributeValue)
Argumenten för denna metod är inte valfria. Båda parametrarna måste inkluderas när du använder denna metod. Parametervärdena för denna metod definieras enligt följande.
Parametervärden
attributnamn: Det är namnet på attributet som vi vill lägga till ett element. Det kan inte lämnas tomt; dvs det är inte valfritt.
attributValue: Det är värdet av attributet som vi lägger till ett element. Det är inte heller ett valfritt värde.
Låt oss förstå hur man använder setAttribute() metod med hjälp av några illustrationer.
Exempel1
I det här exemplet lägger vi till en href attribut med värdet på 'https://www.javatpoint.com/' till tagga med id = 'länk' .
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 Testa det nu Produktion
Efter exekvering av ovanstående kod kommer utgången att vara -
Vi kan se att länken inte skapas innan du klickar på den givna knappen. Efter att ha klickat på knappen kommer utgången att vara -
Nu kan vi se att länken skapas.
Exempel 2
I det här exemplet uppdaterar vi värdet på ett befintligt attribut med hjälp av setAttribute() metod. Här konverterar vi ett textfält till en knapp genom att ändra värdet på typ attribut från text till knapp .
Vi måste klicka på den angivna knappen för att se effekten.
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 Testa det nu Produktion
Efter exekvering av ovanstående kod kommer utgången att vara -
Efter att ha klickat på knappen kommer utgången att vara -
Exempel 3
Här lägger vi till ett booleskt attribut Inaktiverad för att inaktivera den angivna knappen. Om vi ställer in värdet på Inaktiverad attribut till en tom sträng, så sätts den automatiskt till true vilket gör att knappen inaktiveras.
img css align
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 Testa det nu Produktion
Efter exekvering av ovanstående kod kommer utgången att vara -
Efter att ha klickat på knappen kommer utgången att vara -
