de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Hinzufügen und Entfernen von HTML-Klassen auf Anfrage Mit jQuery

Das Hinzufügen neuer HTML-Klassen ist ein Kinderspiel. Öffnen Sie einfach das HTML-Dokument, suchen Sie, was Sie hinzufügen möchten, fügen Sie die Klasse ein und benennen Sie sie. Wenn es jedoch darum geht, eine interaktive Website zu erstellen, die es Ihren Besuchern ermöglicht, sich damit zu beschäftigen, müssen Sie auf Wunsch die HTML-Klassen ändern, einfügen und entfernen.

Sie können dies mit jQuery tun. Diese Beispielfunktion unten wird my-new-class hinzufügen und entfernen

.

 // ## add class $ ('div'). addClass ('meine-neu-klasse'); // ## remove Klasse $ ('div'). removeClass ('meine-neue-Klasse'); 

Wir können auch Standard-JavaScript-Code verwenden, um HTML-Klassen wie folgt hinzuzufügen / zu entfernen:

 // Klasse hinzufügen document.getElementById ('elem'). className = 'meine-neue-Klasse'; // entferne die Klasse document.getElementById ('elem'). className = document.getElementByTag ('div'). className.replace (/ (?: ^ | \ s) meine-neue Klasse (?! \ S) / g, '') 

Der Code, wie Sie oben sehen können, ist weniger einfach als wenn wir es mit einem JavaScript Framework jQuery machen. Wenn Sie sich jedoch nicht auf ein Framework verlassen möchten, können Sie immer eine neue JavaScript-API namens classList .

Verwenden der classList API

Ähnlich wie jQuery bietet classList eine Reihe von Methoden, mit denen wir HTML-Klassen ändern können.

In einem Fall, in dem es ein div mit mehreren Klassen gibt, können wir die Klassen abrufen, die im div mit classList .

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

Wenn wir die Browser-Konsole öffnen, können wir die Liste der Klassen sehen.

Zum Hinzufügen und Entfernen von Klassen können wir .add() und .remove() .

 var elem = document.getElementByID ('elem'); // add class elem.classList.add ('meine-neu-klasse'); // entferne die Klasse elem.classList.remove ('meine-neue-Klasse'); 

Das Hinzufügen mehrerer Klassen kann auch durch Trennen der einzelnen Klassen mit einem Komma erfolgen :

 elem.classList.add ('meine-neue-Klasse', 'meine-andere-Klasse'); 

Um zu prüfen, ob bestimmte Elemente die angegebene Klasse enthalten, können wir .contains() . Sie gibt true zurück, wenn die angegebene Klasse vorhanden ist, und gibt false zurück, wenn dies nicht der Fall ist.

 elem.classList.contains ('Klassenname'); 

Wir können die Klasse auch mit .toggle() . Das folgende Code-Snippet zeigt, wie wir die .toggle() -Methode mit einem Mausklick-Ereignis binden.

 var button = document.getElementById ('button'); Funktion toggle () {elem.classList.toggle ('bg'); } button.addEventListener ('click', toggle, false); 

Sehen Sie sich die Demo in Aktion über die folgenden Links an.

  • Demo anzeigen
  • Quelle herunterladen

Letzter Gedanke

classList ist eine neue native JavaScript-API, die auch zusammen mit HTML5 eingeführt wird. Es ist übersichtlich und einfach und funktioniert in den folgenden Browsern: Firefox 3.6, Opera 11.5 und Chrome 8 sowie Safari 5.1. Es ist jedoch in Internet Explorer 9 und darunter nicht vorhanden. Daher müssen Sie möglicherweise die Polyfills verwenden, wenn Sie die classList-API in Internet Explorer implementieren.

Weitere Ressource

  • Die API classList - HTML5 Doctor
  • Element classList - MDN
  • Hinweise zur classList-API

Erstellen, Kontrollieren und Anpassen eines besseren Modal-Fensters für Ihre Website mit Vex

Erstellen, Kontrollieren und Anpassen eines besseren Modal-Fensters für Ihre Website mit Vex

Ein modales Fenster ist sehr nützlich, wenn Sie Benutzer mit Ihrer Site interagieren möchten. Gelegentlich wird ein modales Fenster als modale Box bezeichnet, da das Fenster zum Anzeigen des Dialogfelds verwendet wird . In einem früheren Artikel hatten wir Sie durch ein Tutorial geführt, wie Sie mit dem Bootstrap-Plugin modale Fenster erstellen können.In d

(Tech- und Design-Tipps)

Die mobile Live-Streaming-Plattform von YouTube wird veröffentlicht

Die mobile Live-Streaming-Plattform von YouTube wird veröffentlicht

Bereits im Juni 2016 hat YouTube seine mobile Livestreaming-Plattform auf eine ausgewählte Anzahl von Nutzern ausgeweitet. Im Februar 2017 wird die mobile Live-Streaming-Plattform endlich in der Öffentlichkeit erscheinen, da YouTube in Kürze die Funktion für beliebte YouTuber einführen wird.Für diejenigen, die diese besondere Funktion nicht kennen, ist die mobile Livestreaming-Plattform von YouTube Teil der YouTube-App, die es Nutzern ermöglicht, live von ihren Mobilgeräten aus zu senden . Möchte

(Tech- und Design-Tipps)