Schaltfläche HTML festlegen

Einführung

Bei der Entwicklung von Webanwendungen ist es häufig erforderlich, den Benutzern ein Einstellungsfenster anzuzeigen, damit Benutzer die Einstellungen der Anwendung entsprechend ihren Anforderungen ändern können. Das Einstellungsfeld enthält normalerweise mehrere Optionen, z. B. das Ändern des Themas, das Anpassen der Lautstärke usw. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML und CSS eine Schaltfläche für Grundeinstellungen erstellen.

HTML-Markup

Zuerst müssen wir eine Schaltfläche in HTML erstellen und ihren Stil auf „Schaltfläche festlegen“ festlegen. Wir können Schaltflächen erstellen, indem wir das „Button“-Element im HTML-Code verwenden.

Settings

CSS-Stile

Jetzt müssen wir dem Schaltflächenelement CSS-Stile hinzufügen, damit sein Aussehen dem einer typischen Einstellungsschaltfläche entspricht. Wir können CSS-Klassenselektoren verwenden, um Stile zu unseren Schaltflächenelementen hinzuzufügen.

.settings-button {
Hintergrundfarbe: #ffffff;
Rand: keiner;
Randradius: 50 %;
Kastenschatten: 0 2px 4px rgba(0, 0, 0, 0,25);
Farbe: Im obigen CSS-Stil haben wir die folgenden Eigenschaften und Werte verwendet:

background-color: #ffffff; – Setzt die Hintergrundfarbe der Schaltfläche auf Weiß.

border: none; – Ränder entfernen.

border-radius: 50 %; – Setzt den Randradius der Schaltfläche auf 50 %, sodass sie kreisförmig ist.

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); – Fügen Sie einen Boxschatten hinzu, damit die Schaltfläche dreidimensionaler aussieht.

Farbe: #484848; – Stellen Sie die Textfarbe der Schaltfläche auf Grau ein.

cursor: Zeiger; – Setzt den Cursor so, dass er auf die Hand zeigt.

Schriftgröße: 24px; – Stellen Sie die Schriftgröße auf 24px ein.

height: 60px; – Stellen Sie die Höhe der Schaltfläche auf 60 Pixel ein.

width: 60px; – Stellen Sie die Schaltflächenbreite auf 60px ein.

Position: fest; – Stellen Sie die Positionierungsmethode der Schaltfläche auf „fest“ ein.

bottom: 20px; – Setzt den unteren Rand der Schaltfläche auf 20 Pixel vom unteren Rand des Ansichtsfensters.

right: 20px; Setzt den rechten Rand der Schaltfläche auf 20 Pixel von der rechten Seite des Ansichtsfensters.

JavaScript-Funktion

Jetzt müssen wir einen Ereignishandler hinzufügen, der JavaScript verwendet, um das Einstellungsfeld anzuzeigen, wenn der Benutzer auf die Schaltfläche klickt. Wir können den folgenden Code verwenden, um diese Anforderung zu erfüllen.

const SettingsButton = document.querySelector(".settings-button");

const SettingsPanel = document.querySelector(".settings-panel");

settingsButton.addEventListener("click", () => {

SettingsPanel.classList.toggle("open");

});

Im Code suchen wir zunächst nach unseren Einstellungsschaltflächen- und Einstellungsfeldelementen im DOM. Dann fügen wir einen Click-Event-Handler für die Einstellungsschaltfläche hinzu. Im Event-Handler wenden wir eine „offene“ Klasse auf das Einstellungsfeld an, sodass es in der Ansicht des Benutzers angezeigt wird. Wenn der Benutzer erneut auf die Schaltfläche „Einstellungen“ klickt, wenden wir die Klasse „Schließen“ an, um das Einstellungsfeld auszublenden.

Fazit

Durch die Verwendung von HTML, CSS und JavaScript haben wir eine einfache Einstellungsschaltfläche erstellt, mit der Benutzer Anwendungseinstellungen ändern können. Die Größe und Farbe dieser Schaltfläche kann mit benutzerdefiniertem CSS geändert werden, um sie an jede Anwendung oder Website anzupassen. Mit Schaltflächen wie dieser können Benutzer die Einstellungen der App ganz einfach an ihre Bedürfnisse und Vorlieben anpassen.

Das obige ist der detaillierte Inhalt vonSchaltfläche HTML festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!