So fügen Sie dem HTML -Element Klassennamen über JavaScript hinzu?

JavaScript liefert einige Ansätze zum Hinzufügen des Klassennamens zu einem HTML -Element wie dem “.add () ”Methode und das “.Klassenname" Eigentum. Der Klassenname kann zu Elementen mit dem CSS (Cascading Style Sheet) und JavaScript hinzugefügt werden. Der Hauptzweck des Klassennamens zu einem HTML -Element besteht darin, mit dem angegebenen Klassennamen unterschiedliche Funktionen im ausgewählten Element zu erreichen.

Die folgenden JavaScript-Ansätze können verwendet werden, um den Klassennamen einem HTML-Element hinzuzufügen:

• Was ist ".add () ”in JavaScript?
• Wie geht es dem ".add () ”Methode funktioniert in JavaScript?
• Was ist ".Klassenname ”in JavaScript?
• Wie geht es dem ".ClassName ”Eigenschaftsarbeit in JavaScript?

Also lasst uns anfangen!

Was ist ".add () ”in JavaScript?

“.add () ”ist eine integrierte Methode der ClassList-Eigenschaft, mit der der Klassenname zu einem bestimmten HTML-Element hinzugefügt werden kann. Mit dem folgenden Snippet können Sie verstehen, wie man das benutzt “.In JavaScript ”Methode hinzufügen:

Element.Klasse.add ("class_name");

Wie geht es dem ".add () ”Methode funktioniert in JavaScript?

In diesem Abschnitt wird eine Schritt-für-Schritt-Anleitung vorgestellt, um zu verstehen.

In diesem Programm erstellen wir drei Dateien mit einer HTML -Datei, einer "CSS" -Datei und einer "JavaScript" -Datei:

Html

So fügen Sie dem HTML -Element Klassennamen über JavaScript hinzu?

Klick mich!

Klicken Sie auf das "Klicken Sie auf mich!"Die Schaltfläche wird dem folgenden P -Element den Klassennamen hinzufügen

Willkommen bei LinuxHint.com!!

Im obigen Snippet haben wir die folgenden Funktionen durchgeführt:

• Wir haben das benutzt

  Tag zum Hinzufügen einer Überschrift.

• Als nächst!”.
• Rief den "classNamefun ()" auf, wenn der Benutzer auf die Schaltfläche klickte.
• Als nächstes haben wir eine erstellt

  Element.

• Schließlich haben wir einen Absatz verwendet

  Element und zugewiesen eine ID "AddClass".

CSS

.Stil
Text-Align: Mitte;
Schriftstil: kursiv;
Hintergrundfarbe: Schwarz;
Farbe weiß;

Die CSS -Datei diente die folgenden Funktionen:

• Richten Sie den Text in der Mitte mit der Eigenschaft „Text-Align“ aus.
• Stellen Sie den kursiven Schriftstil mithilfe von „Font-Stil“ -Mobilie ein.
• Stellen Sie die schwarze Hintergrundfarbe mit der Eigenschaft „Hintergrundfarbe“ ein.
• Stellen Sie schließlich die weiße Textfarbe mit der Eigenschaft "Farbe" fest.

JavaScript

Funktion classNamefun ()
lass para = dokument.getElementById ("AddClass");
para.Klasse.add ("style");

Der .JS- oder JavaScript-Datei diente die unten aufgeführten Funktionen:

• Erstellt eine Funktion namens "classNamefun ()".
• Verwendete die GetelementById () -Methode zum Lesen/Bearbeiten eines HTML -Elements mit einer ID "AddClass".
• Verwenden Sie schließlich die Methode hinzufügen, um den Namen zu dem hinzuzufügen

  Element.

Ausgang
Bei der erfolgreichen Ausführung des Code erhalten wir zunächst die folgende Ausgabe:

Klicken Sie auf „Klicken Sie auf mich!Die Schaltfläche erzeugt die untergegebene Ausgabe:

So ist das ".add () ”Methode funktioniert in JavaScript.

Was ist ".Klassenname ”in JavaScript?

Der ".ClassName ”ist eine Eigenschaft in JavaScript, die die Klassenattribute eines HTML -Elements festlegt/zurückgibt. Es kann verwendet werden, um jedem HTML -Tag den Klassennamen hinzuzufügen/anzugeben.

Der folgende Ausschnitt zeigt die grundlegende Syntax der “.Klassenname ”Eigenschaft:

Element.className = class_name;

Hier repräsentiert der "class_name" den Namen der Klasse. Bei mehreren Klassen können wir den Namen der Klassen unter Verwendung von COMMA -getrennter Syntax angeben.

Wie geht es dem ".ClassName ”Eigenschaftsarbeit in JavaScript?

Betrachten wir das unten angegebene Beispiel, um das grundlegende Verständnis der "zu erhalten".Klassenname ”Eigenschaft.

Html

So fügen Sie dem HTML -Element Klassennamen über JavaScript hinzu?

Klick mich!

Klicken Sie auf das "Klicken Sie auf mich!"Die Schaltfläche fügt diesem Element den Klassennamen hinzu

Die HTML -Klasse führte die folgenden Aufgaben aus:

• Benutzte die

  Element zum Hinzufügen einer Überschrift.

• Verwendetes Tag, um eine Schaltfläche zu erstellen und sie als „Klicken Sie auf mich auf!”.
• Rief den "classNamefun ()" auf, wenn der Benutzer auf die Schaltfläche klickte.
• Schließlich erstellte eine

  und haben es eine ID "AddClass" zugewiesen.

CSS

Die CSS -Datei bleibt wie im vorherigen Beispiel die gleiche.

JavaScript

Funktion classNamefun ()
Lassen Sie Helement = Dokument.getElementById ("AddClass");
Helement.className = "style";

In der JavaScript -Datei haben wir die verwendet GetElementById () Methode zum Lesen/Bearbeiten eines HTML -Elements mit einer ID “.AddClass ”. Anschließend verwendeten wir die Methode hinzufügen, um den Namen zu dem hinzuzufügen

Element.

Ausgang
Wenn wir das oben gegebene Programm ausführen, erzeugt dieses Programm zunächst die untergegebene Ausgabe:

Nach dem Klicken auf das „Klicken Sie auf mich klicken!Die Schaltfläche ”Der ClassNameFun () wird in Folge aufgerufen. Folglich erhalten wir die folgende Ausgabe:

Die Ausgabe verdeutlicht, dass der Klassenname erfolgreich an die hinzugefügt wurde

Element.

Abschluss

In JavaScript die “.add () ”Methode und“.Die Eigenschaft der ClassName ”wird verwendet, um den Klassennamen zu jedem HTML -Element hinzuzufügen. In diesem Artikel wurde alle Grundlagen zum Hinzufügen von Klassennamen zu jedem HTML-Element erläutert. In diesem Beitrag wurde erklärt, wie man das benutzt “.add () ”Methode und“.KlasseName ”Eigenschaft mit Hilfe einiger geeigneter Beispiele.