Die Koordinaten der Maus auf dem Bildschirm können in vielen Situationen nützlich sein. Sie können bei der Entwicklung von Webanwendungen, Spielen oder anderen Programmen helfen, bei denen Sie die Position des Cursors kennen müssen. Darüber hinaus kann das Wissen über die Koordinaten der Maus für das Lernen und Experimentieren im Bereich Computer Vision und maschinelles Lernen nützlich sein.
Es ist ziemlich einfach, die Koordinaten der Maus auf dem Bildschirm herauszufinden. Sie können JavaScript verwenden, um dies zu tun. JavaScript stellt ein spezielles MouseEvent-Ereignis bereit, das auftritt, wenn sich die Maus bewegt. Dieses Ereignis enthält Informationen zu den Mauskoordinaten im Kontext des aktuellen Fensters.
Um die Koordinaten der Maus auf dem Bildschirm herauszufinden, müssen Sie dem Element, in dem wir die Position des Cursors verfolgen möchten, einen MouseEvent-Ereignishandler hinzufügen. In diesem Handler können wir die Mauskoordinaten mithilfe der Eigenschaften clientX und clientY des Ereignisobjekts abrufen. Um die Koordinaten im Kontext des gesamten Browserfensters abzurufen, müssen Sie die Eigenschaften pageX und pageY verwenden.
Verwenden von JavaScript zum Abrufen von Mauskoordinaten
Sie müssen das mousemove-Ereignis verwenden, das ausgelöst wird, wenn Sie die Maus bewegen, um die Mauskoordinaten in JavaScript abzurufen. Mit diesem Ereignis können Sie ganz einfach die Position der Maus relativ zum Browserfenster abrufen.
// Получение элемента, на котором будем отслеживать положение мышиvar element = document.getElementById("myElement");// Обработчик события mousemovefunction getMousePosition(event) // Привязывание обработчика события к элементуelement.addEventListener("mousemove", getMousePosition);Danach binden wir einen Mousemove-Ereignishandler an ein Element, um die Koordinaten der Maus bei jeder Bewegung innerhalb dieses Elements abzurufen.
Erstellen eines HTML-Elements zum Anzeigen der Mauskoordinaten
Fügen Sie dazu den folgenden HTML-Code hinzu:
In diesem Code haben wir erstellt Paragraph mit der ID "coordinates". Diese ID wird verwendet, um über JavaScript auf dieses Element zuzugreifen.
Anwenden von CSS zum Formatieren der Mauskoordinatenanzeige
Nachdem wir gelernt haben, wie man die aktuellen Mauskoordinaten auf dem Bildschirm erhält, können Sie diese mithilfe von CSS stylen.
Mit CSS können Sie die Farbe, den Hintergrund, die Schriftart und andere Anzeigeattribute der Mauskoordinaten ändern. Dazu müssen Sie die Klasse oder den Bezeichner auf das Element anwenden, das die Koordinaten enthält, und die gewünschten Stileigenschaften definieren.
Wenn Sie beispielsweise die Farbe des Mauskoordinatentextes in Rot ändern möchten, können Sie den folgenden CSS-Code verwenden:
.coordinates
Sie können die entsprechenden CSS-Eigenschaften verwenden, um andere Attribute und Stile festzulegen, z. B. background, font-family, font-size und andere.
Neben dem direkten Anwenden von Stilen auf ein Element können Sie auch Pseudoelemente verwenden, z. B. ::before und ::after, um zusätzliche Elemente oder Dekorationen um die Koordinaten der Maus zu erstellen.
Es ist für Entwickler einfacher, Stile zu verstehen und anzuwenden, wenn sie Klassen oder Bezeichner verwenden, um explizit anzugeben, auf welches Element die Stile angewendet werden.
Die Verwendung von CSS zum Stylen der Mauskoordinaten ermöglicht somit die Erstellung einzigartiger und attraktiver Schnittstellen sowie die Verbesserung ihres visuellen Aussehens und ihrer Funktionalität.
