> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/8-dom-manipulatie/html-attributen.md).

# HTML-attributen

Elke HTML-tag heeft tal van attributen die we zeer eenvoudig kunnen wijzigen, wissen en toevoegen. Hiervoor gebruiken we de universele methodes `attr()` en `removeAttr()`. De meest gebruikte attributen (*style*, *class* en *data-xxx*) krijgen hun eigen methodes.

{% hint style="success" %}
★ Open **dom/htmlAttributen.html** en bekijk de broncode.\
★ Test de pagina in een browser.
{% endhint %}

## attr(), removeAttr() en data()

Syntax:

* **Getter** (haal de waarde van een attribuut op).  

  `.attr(attributeName)`.
* **Getter voor data-xxx** (haal de waarde van een *data-xxx* attribuut op).  

  `.data(dataSuffix)`.
* **Setter** (geef het attribuut een nieuwe waarde).  

  `.attr(attributeName,value)`  

  `.attr(attributes)`  

  `.attr(attributeName,function(index,value))`
* **Wis** een attribuut.  

  `.removeAttr(attributeName)`

{% hint style="danger" %}
Het data-attribuut kan u op **twee manieren opvragen**, namelijk via `attr('data-xxx')` of via `data('xxx')`.\
Een data-attribuut **toevoegen** kan ENKEL via `attr('data-xxx', value)`!
{% endhint %}

In onderstaand voorbeeld gaan we met de eerste knop (*#attr1*) het href-attribuut van elke link binnen *#sect1* kopiëren naar het title-attribuut van de link. De tweede knop (*#attr2*) verwijdert het title-attribuut van elke link.

```javascript
$(function() {
    $('#attr1').click(function() {
        $('#sect1 a').each(function(index, element) {
            $(this).attr('title', $(this).attr('href'));
        );
    });
    $('#attr2').click(function() {
        $('#sect1 a').removeAttr('title');
    });
});
```

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAPSv5c8EFBUYCTDrzO%2F-L9sGuKawqM1zLomTn9r%2Fattr1.png?generation=1524083717154427\&alt=media)

{% hint style="success" %}
★ Vervang in het script lijn.
{% endhint %}

```javascript
$(function() {
    $('#attr1').click(function() {
        $('#sect1 a').each(function(index, element) {
            $(this).filter('a[href^="http://"]').attr('title', 'Externe link naar: ' + $(this).attr('href') );
        );
    });
});
```

Nu krijgen enkel de uitgaande links het title-attribuut.\
Een lokale link, zoals de link *homepage*, heeft geen title-attribuut.

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAPSv5c8EFBUYCTDrzO%2F-L9sGuaygpBM7i6Av7gN%2Fattr2.png?generation=1524083717669454\&alt=media)

{% hint style="info" %}
Kijk ook eens naar het gemeenschappelijk script op alle pagina's binnen deze website (map *\_jq/les.js*). Hier vindt u onder andere een script dat elke externe link op de pagina's automatisch in een nieuw browservenster opent.\
`$('a[href^="http://"]').filter('a:not([target])').attr('target','_blank');`
{% endhint %}

## css()

Deze methode wijzigt het style-attribuut. In hoofdstuk 2 wordt de methode `css()` al uitgebreid besproken.

* **Getter** (haal de waarde van een CSS-eigenschap op).  

  `.css(propertyName)`.
* **Setter** (geef de CSS-eigenschap een nieuwe waarde).  

  `.css(propertyName,value)`  

  `.css(properties)`  

  `.css(propertyName,function(index,value))`
* **Wis** het style-attribuut (met `removeAttr()` !!!)  

  `.removeAttr('style')`

Het voorbeeld op de pagina onderlijnt alle links binnen *#sect2* en kleurt ze groen.

```javascript
$('#sect2 a').css('text-decoration', 'underline').css('color', 'green');
// of via een map
$('#sect2 a').css({'text-decoration': 'underline', 'color': 'green'});
```

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAPUTRPTXxQIiBh-Zdb%2F-LAPUWsbk6J7EaJ33GJS%2Fcss.png?generation=1524084125264059\&alt=media)

## addClass(), removeClass(), toggleClass() en hasClass()

```javascript
$('#orange1').click(function() {
    $('#sect3 ul').addClass('orange');
});
$('#orange2').click(function() {
    $('#sect3 ul').removeClass('orange');
});
$('#orange3').click(function() {
    $('#sect3 ul').toggleClass('orange');
});
$('#orange4').click(function() {
    if ($('#sect3 ul').hasClass('orange')) { 
        alert('De lijst heeft een oranje achtergrond');
    } else {
        alert('De lijst heeft een witte achtergrond');
    }
});
```

De methode `addClass()` voegt één of meerdere CSS-classes toe aan een object. Meerdere classes worden gescheiden door een spatie. Bijvoorbeeld `addClass('class1 class2')`. Met `removeClass()` kan u één of meerdere classes verwijderen.\
Met `toggleClass()` kan u een reeds toegekende class verwijderen of een nog niet toegekende class toevoegen.

De laatste methode, `hasClass()`, controleert of een bepaalde class reeds is toegekend aan een element of niet. Deze methode geeft `true` of `false` terug en kan u bijgevolg makkelijk verwerken in een voorwaardelijke instructie.

{% hint style="success" %}
★ Test de vier knoppen in een browser.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAPUTRPTXxQIiBh-Zdb%2F-L9sGwI2kNgc3keTqpbk%2FaddClass.png?generation=1524084126026372\&alt=media)