HTML-klassen op aanvraag toevoegen en verwijderen met jQuery
Het toevoegen van nieuwe HTML-klassen is een goed idee; open gewoon het HTML-document, zoek wat u wilt toevoegen, voeg de naam in en geef de naam een naam. Maar als het gaat om het bouwen van een interactieve website waarmee uw bezoekers zich ermee kunnen bezighouden, moet u op verzoek mogelijk de HTML-klassen aanpassen, invoegen en verwijderen.
Je kunt dit met jQuery doen. Deze onderstaande voorbeeldfunctie zal my-new-class
toevoegen aan en verwijderen van de
// ## 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

Skeuomorphic PSD naar Flat Design met Skeuomorphism.it
Dus het skeuomorfisme is uit en het platte ontwerp zit erin, dat is oud nieuws, maar hey, trends kunnen echt wispelturig zijn en ontwerpers zijn overgeleverd aan het proberen bij te houden. Als u skeuomorfe ontwerpen heeft die u plat wilt laten worden, is hier een hulpmiddel dat een grote hulp zal zijn

Designing For Christmas: de ultieme resource-stapel die u nodig hebt
Kerstmis is om de hoek . Voor ontwerpers en andere creatievelingen is Kerstmis niet alleen een seizoen van geven en een gelegenheid om tijd door te brengen met familie en vrienden, maar ook een geweldige kans voor leuke ontwerpprojecten voor vakanties. Als u moeite heeft met het zoeken naar verschillende kerstmiddelen om uw vakantieontwerpen nog leuker te maken, hoeft u niet verder te zoeken, want we hebben het werk voor u gedaan