Dit bericht illustreert de procedure om de meerdere attributen op een HTML-element in te stellen met behulp van JavaScript.
Hoe stel ik meerdere attributen op een element in met behulp van JavaScript?
Om meerdere attributen tegelijkertijd op een element in te stellen, maakt u eerst een object met de attribuutnamen en -waarden. Krijg een lijst met de sleutels van het object als een array met de ' Object.keys() ' methode, stelt u vervolgens alle attributen in op het opgegeven HTML-element met de ' setAttribuut() ” methode.
Syntaxis
De gegeven syntaxis wordt gebruikt voor de methode setAttribute():
element. setAttribuut ( kenmerknaam, kenmerkwaarde ) ;
De bovenstaande syntaxis bevat twee parameters: “ naam ' en ' waarde ”.
- “ attrNaam ” is de naam van het nieuwe attribuut.
- “ attrWaarde ” is de waarde van het nieuwe attribuut.
- Deze methode maakt een nieuw attribuut en kent er een waarde aan toe. Als het opgegeven kenmerk al bestaat, wordt de waarde ervan bijgewerkt.
Gebruik de gegeven syntaxis voor de methode Object.keys():
Object . sleutels ( object )Het retourneert een array van een bepaald object.
Voorbeeld 1: stel meerdere kenmerken in op een element met behulp van de forEach()-methode Met de setAttribute()-methode
Maak eerst een element in het HTML-bestand:
< knop-id = 'knop' > LINUXHINT knop >Momenteel ziet de webpagina er als volgt uit:
Maak in JavaScript-code eerst een object met de naam ' elementAttributen ” en voeg de attributen met namen en waarden toe aan het object. Hier voegen we het stijlattribuut, de naam van het element en de eigenschap disable voor het knopelement toe:
const elementAttributen = {stijl : 'achtergrondkleur: rgb(153, 28, 49); kleur wit;' ,
naam : 'Linux-knop' ,
gehandicapt : '' ,
} ;
Definieer nu een functie met de naam ' setMeerdereAttributenopElement ” waar u eerst de “ Object.keys() ' methode voor het verkrijgen van de reeks van de sleutels van het object en gebruik vervolgens de ' voorelk() ” methode om door de array te itereren en uiteindelijk de “ setAttribuut() ” methode om alle gedefinieerde attributen op het opgegeven HTML-element in te stellen.
functiesetMultipleAttributesonElement ( element, elementAttributen ) {Object . sleutels ( elementAttributen ) . voor elk ( attribuut => {
element. setAttribuut ( attribuut, elemAttributen [ attribuut ] ) ;
} ) ;
}
Haal de knop op met behulp van de toegewezen id met behulp van de ' getElementById() ” methode:
const knop = document. getElementById ( 'knop' ) ;Roep de gedefinieerde functie aan ' setMeerdereAttributenopElement ” en geef het element door als het eerste argument en het object van attributen als het tweede argument:
setMeerdereAttributenopElement ( knop, elementAttributen ) ;De uitvoer laat zien dat de meerdere attributen van een knop succesvol zijn toegevoegd:
U kunt ook meerdere attributen op een element instellen zonder een apart object voor de attributen te maken. Volg hiervoor het onderstaande voorbeeld.
Voorbeeld 2: Stel meerdere attributen in op een element met behulp van for Loop met de setAttribute()-methode
Definieer een functie met twee parameters in een JavaScript-bestand en gebruik een for-lus om meerdere attributen erin in te stellen door de ' setAttribuut() ” methode:
functiesetMultipleAttributesonElement ( element, elementAttributen ) {voor ( laat ik in elemAttributes ) {
element. setAttribuut ( ik, elemAttributen [ i ] ) ;
}
}
Haal de knop op met behulp van de toegewezen id:
const knop = document. getElementById ( 'knop' ) ;Roep de gedefinieerde functie aan door het knopelement en meerdere attributen door te geven in de vorm van naam-waardeparen:
setMeerdereAttributenopElement ( knop, { 'stijl' : 'achtergrondkleur: rgb(153, 28, 49); kleur: wit;' , 'gehandicapt' : '' , 'naam' : 'Linux-knop' } ) ;Uitgang
We hebben alle essentiële informatie verzameld met betrekking tot het instellen van de meerdere attributen op een HTML-element met behulp van JavaScript.
Conclusie
De JavaScript vooraf gedefinieerd setAttribuut() ” methode wordt gebruikt om enkele of meerdere attributen voor een element in te stellen. Om meerdere attributen op een element in te stellen, maakt u eerst een object dat attributen bevat in de vorm van namen-waarden. Verkrijg de sleutels van objecten in een array met behulp van de ' Object.keys() ” methode, stel dan alle attributen op de gespecificeerde elementen in met de “ setAttribuut() ” methode. In dit bericht hebben we de procedure geïllustreerd om meerdere attributen op een HTML-element in te stellen met behulp van JavaScript.