De setAttribuut() methode wordt gebruikt om een attribuut aan een bepaald element in te stellen of toe te voegen en er een waarde aan te geven. Als het attribuut al bestaat, wordt alleen de waarde van het attribuut ingesteld of gewijzigd. We kunnen dus ook gebruik maken van de setAttribuut() methode om de waarde van het bestaande attribuut bij te werken. Als het corresponderende attribuut niet bestaat, wordt er een nieuw attribuut gemaakt met de opgegeven naam en waarde. Deze methode retourneert geen enkele waarde. De attribuutnaam wordt automatisch omgezet in kleine letters wanneer we deze op een HTML-element gebruiken.
Hoewel we de stijl attribuut met behulp van de setAttribuut() methode, maar het wordt aanbevolen deze methode niet te gebruiken voor styling. Voor het toevoegen van stijlen kunnen we de eigenschappen van het stijlobject gebruiken, waardoor de stijl effectief wordt gewijzigd. Met de volgende code kan het duidelijk zijn.
Verkeerde manier
Het wordt aanbevolen om het niet te gebruiken om de stijl te veranderen.
element.setAttribute('style', 'background-color: blue;');
Goede weg
Hieronder vindt u de juiste manier om de stijl te wijzigen.
element.setAttribute.backgroundColor = 'blue';
Om de waarde van een attribuut te achterhalen, kunnen we de getAttribute() methode, en om een specifiek attribuut uit een element te verwijderen, kunnen we de verwijderkenmerk() methode.
Als we een Booleaans attribuut toevoegen, zoals gehandicapt , dan wordt het, ongeacht de waarde die het heeft, altijd beschouwd als WAAR . Als we de waarde van het Booleaanse attribuut moeten instellen op vals , moeten we het volledige attribuut verwijderen met behulp van de verwijderAttribuut() methode .
Syntaxis
element.setAttribute(attributeName, attributeValue)
De argumenten van deze methode zijn niet optioneel. Bij gebruik van deze methode moeten beide parameters worden opgenomen. De parameterwaarden van deze methode worden als volgt gedefinieerd.
Parameterwaarden
attribuut naam: Het is de naam van het attribuut dat we aan een element willen toevoegen. Het kan niet leeg gelaten worden; dat wil zeggen, het is niet optioneel.
Attribuutwaarde: Het is de waarde van het attribuut dat we aan een element toevoegen. Het is ook geen optionele waarde.
Laten we begrijpen hoe we het moeten gebruiken setAttribuut() methode aan de hand van enkele illustraties.
bash als voorwaarde
Voorbeeld 1
In dit voorbeeld voegen we a toe href attribuut met een waarde van 'https://www.javatpoint.com/' naar de taggen met 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 Test het nu Uitvoer
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
We kunnen zien dat voordat op de gegeven knop wordt geklikt, de link niet is gemaakt. Nadat u op de knop hebt geklikt, is de uitvoer:
cpp is gelijk
Nu kunnen we zien dat de link is gemaakt.
Voorbeeld2
In dit voorbeeld werken we de waarde van een bestaand attribuut bij met behulp van de setAttribuut() methode. Hier converteren we een tekstveld naar een knop door de waarde van te wijzigen type attribuut van tekst naar knop .
We moeten op de opgegeven knop klikken om het effect te zien.
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 Test het nu Uitvoer
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
Nadat u op de knop hebt geklikt, is de uitvoer:
Voorbeeld3
Hier voegen we een Booleaans attribuut toe gehandicapt om de opgegeven knop uit te schakelen. Als we de waarde van de gehandicapt attribuut toe aan een lege string, dan wordt het automatisch ingesteld op true, waardoor de knop wordt uitgeschakeld.
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 Test het nu Uitvoer
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
Nadat u op de knop hebt geklikt, is de uitvoer:
