Wie mache ich eine Schaltfläche in JavaScript

Wie erstelle ich eine Schaltfläche in JavaScript

Sie können ein button-Element oder ein input-Element mit dem Typ "button" verwenden, um eine Schaltfläche in JavaScript zu erstellen. Hier sind Beispiele für das Erstellen einer Schaltfläche mit jedem dieser Elemente:

1. Verwenden des button-Elements :

Нажми меня!function myFunction() 

2. Verwenden eines input-Elements mit dem Typ "button":

function myFunction() 

Jetzt wissen Sie, wie Sie eine Schaltfläche in JavaScript erstellen. Verwenden Sie diese Beispiele in Ihrem Code und passen Sie die Schaltfläche an Ihre Bedürfnisse an!

Vorbereiten der Erstellung einer Schaltfläche

Bevor Sie mit dem Erstellen einer Schaltfläche in JavaScript beginnen, müssen Sie einige vorläufige Schritte ausführen.

1. Erstellen Sie HTML-Markup

Erstellen Sie ein Element, in dem sich die Schaltfläche befindet. Sie können ein Tag oder ein anderes geeignetes Element verwenden. Zum Beispiel:

2. Schließen Sie das Skript an

Fügen Sie das Tag in den Abschnitt oder vor das schließende Tag ein . Geben Sie den Pfad zur Skriptdatei an, oder fügen Sie den JavaScript-Code selbst ein. Zum Beispiel:

3. Schreiben Sie JavaScript-Code

Öffnen Sie die Skriptdatei oder fügen Sie sie dem Tag hinzu . Legen Sie im Code die erforderlichen Parameter für die Schaltfläche fest. Zum Beispiel:

let button = document.querySelector('#myButton');

button.innerText = 'Klicke auf mich';

Beachten Sie, dass in diesem Beispiel die querySelector() -Methode verwendet wird, um ein Element mit der ID "myButton" auszuwählen. Bevor Sie einer Schaltfläche Text zuweisen, musste sie zuerst ausgewählt werden.

Fertig! Jetzt können Sie mit der Erstellung einer Schaltfläche in JavaScript fortfahren.

Definieren des Aussehens einer Schaltfläche

Sie können CSS-Eigenschaften und -Klassen verwenden, um das Aussehen einer Schaltfläche in JavaScript zu bestimmen. Mit CSS können Sie die Farbe der Schaltfläche, die Schriftart, die Größe, den Rahmen und vieles mehr festlegen.

Sie können zunächst die Standardschaltflächenstile verwenden, die Sie im Standardbrowser festgelegt haben. Zum Beispiel:

In diesem Beispiel wird eine Klasse erstellt .button, dem die Stile für die Schaltfläche zugewiesen sind. In dieser Klasse können Sie je nach Projektanforderungen andere Stile festlegen.

Um diese Klasse für eine Schaltfläche zu verwenden, müssen Sie sie dem entsprechenden HTML-Element hinzufügen. Zum Beispiel:

Нажми на меня

Wenn die Schaltfläche auf einer Seite angezeigt wird, wird das Aussehen der Schaltfläche durch die Klassenstile definiert .button.

Sie können auch das Aussehen einer Schaltfläche bei bestimmten Ereignissen ändern. Zum Beispiel, wenn Sie den Cursor bewegen oder eine Taste drücken. Dazu können Sie CSS-Pseudoklassen wie :hover und :active verwenden. Zum Beispiel:

In diesem Beispiel werden die Stile für eine Schaltfläche festgelegt, wenn Sie schweben und darauf klicken. Wenn Sie den Mauszeiger über eine Schaltfläche bewegen, ändert sich die Hintergrundfarbe der Schaltfläche, und wenn Sie darauf klicken, ändert sich die Hintergrundfarbe noch weiter.

Um also eine Schaltfläche in JavaScript zu erstellen und ihr Aussehen zu bestimmen, müssen Sie CSS-Eigenschaften und -Klassen verwenden. Mit CSS können Sie verschiedene Stile für eine Schaltfläche festlegen und das Erscheinungsbild einer Schaltfläche bei bestimmten Ereignissen ändern.

Eine Funktion an eine Schaltfläche binden

In JavaScript wird das Click-Ereignis verwendet, um eine Funktion an eine Schaltfläche zu binden. Zuerst müssen Sie die Schaltfläche auswählen, an die die Funktion gebunden werden soll. Dies kann mit der getElementById() -Methode geschehen, indem Sie die ID der Schaltfläche als Argument angeben.

Nachdem Sie eine Schaltfläche ausgewählt haben, können Sie eine Funktion an sie binden, die bei jedem Drücken der Schaltfläche ausgeführt wird. Dies kann mit der addEventListener() -Methode erfolgen. Das erste Argument gibt das Click-Ereignis an und das zweite Argument ist die Funktion selbst.

// HTML-код кнопки:Нажми меня // JavaScript-код: document.getElementById("myButton").addEventListener("click", myFunction); function myFunction() 

Wenn Sie eine Funktion an eine Schaltfläche binden, können Sie interaktive und benutzerdefinierte Webseiten erstellen. Sie können diese Technik verwenden, um verschiedene Aktionen auszuführen, z. B. das Senden eines Formulars, das Öffnen eines modalen Fensters oder das Ausführen einer Anfrage an den Server.

Wie füge ich Stile zu einer Schaltfläche in JavaScript hinzu

Um einer Schaltfläche in JavaScript Stile hinzuzufügen, können Sie die style-Eigenschaft des Schaltflächenobjekts verwenden. Mit der style-Eigenschaft können Sie auf die CSS-Eigenschaften einer Schaltfläche zugreifen und deren Werte ändern.

const button = document.createElement('button');button.innerText = 'Нажми меня';// Добавляем стили к кнопкеbutton.style.backgroundColor = 'blue';button.style.color = 'white';button.style.padding = '10px 20px';button.style.border = 'none';button.style.cursor = 'pointer';document.body.appendChild(button);

Im obigen Beispiel erstellen wir eine Schaltfläche mit der createElement-Methode und legen ihren Text mit der innerText-Eigenschaft fest. Dann verwenden wir die style-Eigenschaft, um der Schaltfläche Stile hinzuzufügen. Zum Beispiel setzen wir die Hintergrundfarbe einer Schaltfläche auf Blau, die Textfarbe auf Weiß und legen die Einrückung auf 10 Pixel oben und unten, auf 20 Pixel links und rechts fest. Wir entfernen auch den Rahmen der Schaltfläche, damit sie flacher aussieht, und setzen den Cursor als Zeiger, so dass er sich ändert, wenn Sie über die Schaltfläche schweben.

Nachdem wir der Schaltfläche Stile hinzugefügt haben, können wir sie mithilfe der appendChild-Methode zur Seite hinzufügen und die Schaltfläche als Argument übergeben.

Verwenden von Inline-Stilen

Schaltflächen in JavaScript können mit integrierten Stilen gestylt werden. Sie können dazu ein Tag innerhalb des Tags Ihres HTML-Dokuments verwenden.

Beispiel für die Verwendung von Inline-Stilen für eine Schaltfläche:

Im obigen Beispiel hat die Schaltfläche einen grünen Hintergrund (#4CAF50), eine weiße Textfarbe, 10 Pixel Einzug oben und unten (10px 24px) und keine Grenze (border: none). Die Schaltfläche hat auch einen Cursor in Form eines Pfeils, wenn Sie darauf zeigen (cursor: pointer).

Sie können Schaltflächenstile ändern, indem Sie Eigenschaften im Attribut hinzufügen oder ändern style. Sie können beispielsweise die Hintergrundfarbe in Blau (#0000FF) und die Textfarbe in Gelb (#FFFF00) ändern, wenn Sie den Attributwert ersetzen style wie folgt: style="background-color: #0000FF; color: #FFFF00; padding: 10px 24px; border: none; cursor: pointer;".

Anwenden externer Stile

Mit JavaScript können Sie die Stile von Elementen auf einer Webseite dynamisch ändern. Dazu wird ein Objekt verwendet style, dessen Eigenschaften gesteuert werden können.

Sie können externe Stile wie folgt auf eine Schaltfläche anwenden:

1. Finden Sie die Schaltfläche auf der Seite mithilfe der Methode querySelector durch Angabe des Schaltflächenwählers.
2. Eigenschaft verwenden style das Schaltflächenobjekt zum Anwenden von Stilen.

let button = document.querySelector("button");button.style.backgroundColor = "blue";button.style.color = "white";button.style.borderRadius = "5px";

In diesem Beispiel werden Stile auf eine Schaltfläche angewendet. Sie haben einen blauen Hintergrund, eine weiße Textfarbe und abgerundete Ecken festgelegt.

Hinzufügen von Klassen und IDs

JavaScript verwendet die classList-Methode, um einer Schaltfläche eine Klasse hinzuzufügen.add() . Ein Beispiel:

document.querySelector('button').classList.add('my-class');

In diesem Beispiel wählen wir die erste Schaltfläche auf der Seite mit der querySelector() -Methode aus und fügen eine Klasse mit dem Namen "my-class" mit der classList-Methode hinzu.add() .

Ebenso können Sie die ID-Eigenschaft eines Elements verwenden, um eine ID hinzuzufügen. Ein Beispiel:

document.querySelector('button').id = 'my-id';

In diesem Beispiel wählen wir die erste Schaltfläche auf der Seite aus und legen die ID mit der ID-Eigenschaft auf den Namen "my-id" fest.

Beachten Sie, dass die ID bei Verwendung auf der gesamten Seite eindeutig sein muss, während Klassen auf verschiedenen Elementen wiederverwendet werden können.

Wie ändere ich den Text auf einer Schaltfläche in JavaScript

Der Text auf einer Schaltfläche wird mit JavaScript geändert, indem auf die innerHTML-Eigenschaft des Schaltflächenelements zugegriffen wird.

Im Folgenden finden Sie einen Beispielcode, der veranschaulicht, wie Sie den Text auf einer Schaltfläche ändern können:

1. Erstellen Sie eine Schaltfläche mit einem Element .
   • Fügen Sie der Schaltfläche ein ID-Attribut hinzu, um darauf zuzugreifen.
2. Verwenden Sie JavaScript, um die Schaltfläche anhand ihrer ID zu finden und den Text zu ändern, indem Sie der innerHTML-Eigenschaft einen neuen Wert zuweisen.

Hier ist ein Beispielcode:

Нажми меня

In diesem Beispiel haben wir eine Schaltfläche mit der ID "myButton" erstellt und den Text auf der Schaltfläche mit JavaScript geändert.

Sie können diesen Ansatz verwenden, um den Text auf einer Schaltfläche abhängig von den Aktionen des Benutzers oder anderen Bedingungen in Ihrem JavaScript-Code zu ändern.

Verwenden der innerHTML-Eigenschaft

Die innerHTML-Eigenschaft wird verwendet, um HTML-Code innerhalb eines Elements abzurufen oder festzulegen. Es ermöglicht Ihnen, den Inhalt von Elementen programmgesteuert zu ändern, Markup hinzuzufügen oder zu entfernen.

Um den HTML-Code innerhalb eines Elements abzurufen, können Sie die folgende Syntax verwenden:

var elementHTML = element.innerHTML;

wobei element ein Verweis auf das Element ist, in dem der HTML-Code des Inhalts abgerufen werden soll.

// Получаем HTML-код содержимого элемента с идентификатором "myElement"var myElement = document.getElementById("myElement");var elementHTML = myElement.innerHTML;console.log(elementHTML); // Выведет HTML-код содержимого элемента

Um den HTML-Code innerhalb eines Elements festzulegen, können Sie die folgende Syntax verwenden:

element.innerHTML = newHTML;

dabei ist element ein Verweis auf das Element, in das der neue HTML-Code eingefügt werden soll, und newHTML ist der neue HTML-Code, den Sie installieren möchten.

// Устанавливаем новый HTML-код в элемент с идентификатором "myElement"var myElement = document.getElementById("myElement");myElement.innerHTML ;

Beachten Sie, dass Sie bei der Verwendung der innerHTML-Eigenschaft vorsichtig sein sollten, da diese bei falscher Eingabe zu schädlichem Code oder Datenverlust führen kann.