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.

★ Open dom/htmlAttributen.html en bekijk de broncode. ★ Test de pagina in een browser.

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)

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)!

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.

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

★ Vervang in het script lijn.

$(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.

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');

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.

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

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

$('#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.

★ Test de vier knoppen in een browser.