ONCLICK CSS

Die Schaltfläche oder das Bild eines Objekts hat ein Attribut mit dem Namen „Onclick.”Wenn das Bild oder eine Schaltfläche angeklickt wird, wird ein Ausdruck darin bewertet. Benutzer können mehr als nur Variablen bewerten, indem sie ein Onclick -Ereignis verwenden. Außerdem kann es verwendet werden, um ein Attribut jeglicher Art von Ausdruck zu definieren. Außerdem können wir einer globalen Variablen mit Hilfe des: = Operators einen Wert zuweisen. Wenn der Benutzer auf das Element oder die Schaltfläche drückt/klickt, erfolgt das Onclick -Ereignis. Durch Klicken/Drücken des Elements können wir den JavaScript -Code ausführen. Dieses Ereignis kann auch verwendet werden, um Warnungen anzuzeigen und Formulare zu validieren.

Syntax des Onclick -Ereignisses

In HTML

Hier können Elemente ein Knopf oder etwas anderes sein. Im Onclick -Event schreiben wir ein Skript oder eine Funktion. Das Onclick -Event unterstützt fast alle Elemente von HTML außer , , , , , , , , <br>, , Und . Es bedeutet, dass ein Onclick -Ereignis mit diesen Tags nicht verwendet werden kann.</p> <p><strong>In js</strong></p> Objekt.onclick = function () script; <p>In JavaScript werden wir dem Onclick -Ereignis eine Funktion zuweisen. In der Klammung schreiben wir das Skript, um eine Aufgabe oder Funktion auszuführen.</p> <p><strong>Beispiel 1: Onclick -Ereignis, um die Textfarbe zu ändern</strong></p> <p>Wenn wir auf einer Website auf eine Schaltfläche klicken, löst das Onclick -Ereignis ein bestimmtes Verhalten aus. Dies kann auftreten, wenn wir Online -Formulare oder Daten einreichen, wenn wir bestimmte Webseiteninhalte und ähnliche Ereignisse ändern. Um das Onclick-Event in einer realen Umgebung zu üben, schreiben wir zunächst ein einfaches HTML mit etwas Styling.</p> <p>Wir haben eine einfache HTML -Seite erstellt, auf der es einen Text mit einer Schaltfläche gibt. Um die Seite zu stylieren, haben wir einige CSS verwendet.</p> <p>Wenn wir auf die Schaltfläche klicken, beabsichtigen wir, den Text blau zu machen.</p> <p>Nachdem wir die JavaScript -Methode geschrieben haben, um die Farbe zu ändern, müssen wir unserer Schaltfläche eine Onclick -Eigenschaft hinzufügen. Daher müssen wir unsere HTML leicht verändern:</p> <p>Wir haben ein Onclick -Ereignis im Button -Tag hinzugefügt. Wir haben eine Funktion namens ChangeColor () zur Ausführung zugewiesen. Für das Ergebnis müssen wir eine JS -Datei erstellen, um sie in eine JavaScript -Datei oder ein Tag in einer HTML -Datei zu schreiben. Wir werden unser Skript jedoch in die HTML -Datei schreiben.</p> <p>Zunächst müssen wir das Element auswählen, das wir ändern möchten, nämlich der Text „Ändern Sie die Farbe“, die in der enthalten ist <p> Schild. Die DOM -Methoden GetElementsByClassName (), GetelementById () oder QuerySelector () in JavaScript können verwendet werden, um dies zu erreichen. Der Wert wird dann der Variablen zugewiesen. Wir werden QuerySelector () in diesem Beispiel verwenden, da es aktueller und schneller ist. Zusätzlich werden die Variablen mit Verwendung deklariert <strong>Const</strong>. Es ist sicherer, weil es hilft, Variablen schreibgeschützt zu machen.</p> <p>Jetzt werden wir im Skript -Tag unsere Funktion schreiben.</p> <p>Wie oben in HTML zu sehen, ist die Funktion, die wir verwenden werden, echnalColor (). Dies ist der Grund, warum ChangeColor als unsere Funktionskennung (Name) festgelegt wird. Es wird nicht funktionieren, wenn der Name dem entspricht, was sich in der HTML befindet. In DOM, um alles, was mit dem Stil zu tun hat, müssen Sie „Stil“ schreiben, gefolgt von einem Punkt (.). Die Änderung, die Sie vornehmen möchten, wird dann vorgenommen, die Farbe, Hintergrundfarbe, Textgröße usw. sein können. Um auf unseren Text „Ändern Sie die Farbe ändern“ zuzugreifen, verwenden wir den deklarierten variablen Namen in unserer Funktion. Dann setzen wir die Farbe des Textes auf blau. Wenn wir die Taste drücken, ändert sich die Farbe des Textes in Blau:</p> <p>Indem wir unseren Text mehr Farben hinzufügen, können wir die Dinge noch einen Schritt weiter gehen:</p> <p>Also, was wir gerne tun möchten, ist, das Schreiben orange-rot, grün und blau zu machen. Diesmal akzeptieren die HTML -Funktionen von Onclick die Werte für die Farbe, die wir auf den Text anwenden möchten. In JavaScript werden diese als Parameter bezeichnet. Wir werden auch eine Funktion erstellen, die ihre Parameter auch akzeptiert. Wir nennen sie "Farbe". Unsere Website hat geringfügige Änderungen erfahren:</p> <p>Wählen wir also unseren Text "Ändern Sie den Farb ändern" und geben Sie den Code ein, um ihn orange-rot, blau und grün zu machen:</p> <p>Der Code der Funktion legt zuerst die Farbe auf das, was an die Anrufe von echnecolor () in den HTML -Schaltflächen geliefert wurde.”</p> <p>Wenn wir eine dieser Tasten (blau, grün und orange) drücken, ändert sich die Farbe des Textes entsprechend.</p> <p><strong>Beispiel 2: Erstellen Sie Warnungen mit dem Onclick -Ereignis</strong></p> <p>Erstellen wir in diesem Beispiel eine Beispiel -Webseite mit einer Schaltfläche mit HTML. Wenn die Taste gedrückt wird, erhalten wir oben auf dem Bildschirm eine Warnmeldung. Um eine Webseite zu erstellen, verwenden wir den folgenden Code:</p> <p>Eine Webseite, die aus einer Schaltfläche besteht, wird mit diesem Code erstellt:</p> <p>Jetzt müssen wir eine JavaScript -Funktion schreiben, die ausgeführt wird, um Warnungen zu generieren. Erstellen wir eine Funktion showArt () in den Skript -Tags in demselben HTML -Code wie folgt:</p> <p>Nach dem Schreiben der JavaScript -Methode, um die Farbe zu ändern, müssen wir unserer Schaltfläche eine Onclick -Eigenschaft hinzufügen. Daher müssen wir unsere HTML leicht verändern:</p> <p>Das Aktualisieren dieses Codes fügt der Schaltfläche Funktionen hinzu. Wenn ein Benutzer die Schaltfläche trifft, wird die Onclick -Eigenschaft auf der Taste bewirkt, dass die Funktion "showArt () ausgelöst wird. Tastaturbenutzer können auch das Onclick -Ereignis verwenden. Die Mitteilung wird auch gesendet, wenn ein Benutzer die Registerkarte verwendet, um zur Taste zu wechseln, und dann die Eingabetaste drückt.</p> <p>Wie Sie oben sehen können, haben wir nach dem Drücken der Taste "Alarmanhänger" eine Warnmeldung erhalten.</p> <p>Für das Button -Element kann ein neuer Stil hinzugefügt werden. Um das Erscheinungsbild der Schaltfläche zu ändern, wenn Benutzer darüber oder Tastaturregisterkarte über die Tastaturmaus maust.</p> <p>Der obige Code styliert eine Schaltfläche. Es ist nur für die Erfahrung des Benutzers. Das Stylieren der Schaltfläche wirkt sich nicht auf die Funktionalität der Schaltfläche aus.</p> <p>Versuchen Sie, nach dem Styling auf die Schaltfläche zu klicken. Wenn alles nach dem Plan verläuft, sollte das Überschweben der Schaltfläche zu einer Änderung des Stils führen. Wie zuvor sollte das Drücken der Taste dazu führen, dass die Warnung mit Ihrem benutzerdefinierten Text angezeigt wird. Testen Sie es jetzt ohne Maus, um sicherzustellen, dass es auch für Tastaturbenutzer funktioniert.</p> <p><strong>Beispiel 3: Onclick -Event zum Kopieren des Textes</strong></p> <p>Wir können auch Text von einem Feld in ein anderes kopieren, indem wir das Onclick -Ereignis und eine JavaScript -Funktion verwenden. Erstellen wir eine HTML -Seite mit zwei Eingabetextfeldern, damit wir Daten zum Kopieren schreiben können.</p> <p>Wir müssen die Funktion in den Skript -Tags schreiben, damit wir sie mit dem Onclick -Ereignis wie folgt aufrufen können:</p> <p>Nachdem Sie den Code aktualisiert haben, wird beim Drücken der Taste das Onclick -Ereignis den Funktion CopyTxt aufgerufen und der Text des Textes von Text1 wird in das Feld Text2 kopiert.</p> <p><strong>Abschluss</strong></p> <p>In diesem Tutorial haben wir gesehen, dass beim Klicken auf ein Element das Onclick -Ereignis einem Programmierer ermöglicht, eine JavaScript -Funktion auszuführen. Wir können es für viele verschiedene Funktionen verwenden, wie z. B. Warnmeldungen und Formularvalidierung usw. Wir haben in diesem Beitrag drei Beispiele implementiert, um Ihnen zu zeigen. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://www.cyberaxe.org/article/the-ipcs-linux-command-with-examples">« Der Befehl IPCS Linux mit Beispielen</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/css-overflow-wrap">CSS -Überlaufpackung »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/git">Git</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-rewrite-most-recent-commit-history-in-git">So schreiben Sie die jüngste Commit -Geschichte in Git um?</a> </div> <div class="white-news__text"> Um die Geschichte der Feststellung neu zu schreiben, kann der Befehl „Git Commit“ mit der Option -Am... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/linux-commands">Linux -Befehle</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-start-a-multicast-traffic-in-iperf">So starten Sie einen Multicast -Verkehr in Iperf</a> </div> <div class="white-news__text"> Tutorial, wie Sie einen Multicast -Verkehr in Iperf und die Befehle iperf starten, um den Multicast ... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/bash-programming">Bash -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-check-existence-of-input-argument-in-a-bash-shell-script">So überprüfen Sie das Vorhandensein von Eingabemarions in einem Bash -Shell -Skript</a> </div> <div class="white-news__text"> Wir können unterschiedliche Techniken verwenden, um die Existenz von Eingabemarions zu überprüfen, z... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-unzip-files-in-python">So entpacken Sie Dateien in Python</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/convert-a-string-to-json-python">Konvertieren Sie eine Schnur in JSON Python</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/frederik-rodehau">Frederik Rodehau</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-docker-copy-command-to-transfer-a-file-from-a-docker-container-to-the-host-machine">So verwenden Sie den Befehl „Docker Copy“, um eine Datei von einem Docker -Container auf den Host -Computer zu übertragen?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">So verwenden Sie das CMDLet für Bewegung in PowerShell?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">So verwenden Sie das Sort-Objekt-CMDLet in PowerShell</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-download--install-sqlite-tools">So herunterladen und installieren Sie SQLite -Tools?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-lambda-operator--is-used-in-c">Wie Lambda -Operator '=>' in C# verwendet wird</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-php-getdate-function">So verwenden Sie die PHP -GetDate -Funktion</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-strlen-function-in-php">So verwenden Sie Strlen -Funktion in PHP</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-memory-address-in-c-and-how-to-find-it">Was ist Speicheradresse in C ++ und wie findet sie sie??</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>