HTML-klassen op aanvraag toevoegen en verwijderen met jQuery

 // ## add class $ ('div'). addClass ('my-new-class'); // ## verwijder class $ ('div'). removeClass ('my-new-class'); 

We kunnen ook standaard JavaScript-code gebruiken om HTML-klassen toe te voegen of te verwijderen, zoals:

 // add class document.getElementById ('elem'). className = 'mijn nieuwe klas'; // remove class document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) my-new-class (?! \ S) / g, '') 

De code zoals je hierboven kunt zien is minder eenvoudig dan wanneer we het doen met een JavaScript Framework jQuery. Maar als u niet op een framework wilt vertrouwen, kunt u altijd een nieuwe JavaScript-API gebruiken met de naam classList .

De classList API gebruiken

Net als bij jQuery, biedt classList een reeks methoden waarmee we HTML-klassen kunnen wijzigen.

In het geval dat er een div met meerdere klassen, kunnen we de klassen ophalen die zijn toegewezen in de div met behulp van classList .

 var classes = document.getElementByID ('elem'). classList; console.log (klassen); 

Wanneer we de browserconsole openen, zien we de lijst met klassen.

Om klasse toe te voegen en te verwijderen, kunnen we .remove() en .remove() .

 var elem = document.getElementByID ('elem'); // add class elem.classList.add ('my-new-class'); // verwijder class elem.classList.remove ('my-new-class'); 

Het toevoegen van meerdere klassen kan ook worden gedaan door elke klasse te scheiden met een komma :

 elem.classList.add ('my-new-class', 'my-other-class'); 

Om te controleren of bepaalde elementen de opgegeven klasse bevatten, kunnen we .contains() . Het zal true teruggeven als de opgegeven klasse aanwezig is en false retourneren als dit niet het geval is.

 elem.classList.contains ( 'class-name'); 

We kunnen de klasse ook schakelen met .toggle() . Het volgende codefragment laat zien hoe we de methode .toggle() binden met een gebeurtenis met de muisklik.

 var-knop = document.getElementById ('knop'); function toggle () {elem.classList.toggle ('bg'); } button.addEventListener ('klik', toggle, false); 

Bekijk de demo in actie vanaf de volgende links.

• Demo bekijken
• Download de bron

Laatste gedachte

classList is een nieuwe native JavaScript API die ook wordt geïntroduceerd samen met HTML5. Het is netjes en eenvoudig en werkt in de volgende browsers: Firefox 3.6, Opera 11.5 en Chrome 8 en Safari 5.1. Het is echter afwezig in Internet Explorer 9 en lager, dus misschien moet u Polyfills gebruiken bij de implementatie van classList API in Internet Explorer.

Verdere bronnen

• De classList API - HTML5 Doctor
• Element classList - MDN
• Opmerkingen over classList API

19 Handige Google Apps-scripts om Google Drive te automatiseren

Google Drive biedt geweldige functies voor het opslaan en werken met verschillende soorten bestanden, maar het heeft niet alle functies die cruciaal zijn voor je werk. Google Apps Scripts is een eenvoudig te gebruiken scripttaal om dingen gedaan te krijgen, die anders niet beschikbaar zijn in Drive.Er zijn scripts waarmee je tekst uit afbeeldingen kunt lezen / uitpakken, bestanden kunt converteren, sociale foto's automatisch kunt back-uppen of Gmail-bijlagen kunt opslaan

(Technische en ontwerptips)

Top 15 apps van de OpenShift Marketplace

Ooit gehoord van OpenShift? OpenShift is een vereenvoudigd cloudplatform voor ontwikkelaars om applicaties moeiteloos te bouwen en te implementeren in de cloud . Het biedt gratis gebruik van drie kleine versnellingen en 1 GB databaseopslag en het wordt geleverd met ondersteuning voor een breed scala aan programmeertalen, databases en platforms

(Technische en ontwerptips)