Souřadnice myši na obrazovce mohou být užitečné v mnoha situacích. Mohou pomoci při vývoji webových aplikací, her nebo jiných programů, kde je potřeba znát polohu kurzoru. Kromě toho může být znalost souřadnic myši užitečná pro učení a experimenty v počítačovém vidění a strojovém učení.
Zjistit souřadnice myši na obrazovce je docela jednoduché. K tomu lze použít JavaScript. JavaScript poskytuje speciální událost-MouseEvent, ke které dochází při pohybu myši. Tato událost obsahuje informace o souřadnicích myši v kontextu aktuálního okna.
Chcete-li zjistit souřadnice myši na obrazovce, musíte k položce Přidat obslužnou rutinu události MouseEvent, ve které chceme sledovat polohu kurzoru. V této obslužné rutině můžeme získat souřadnice myši pomocí vlastností clientX a clientY objektu události. Chcete-li získat souřadnice v kontextu celého okna prohlížeče, musíte použít vlastnosti pageX a pageY.
Použití JavaScriptu k získání souřadnic myši
Chcete-li získat souřadnice myši v JavaScriptu , musíte použít událost mousemove, která se spustí při pohybu myši. Pomocí této události lze snadno získat polohu myši vzhledem k oknu prohlížeče.
// Получение элемента, на котором будем отслеживать положение мышиvar element = document.getElementById("myElement");// Обработчик события mousemovefunction getMousePosition(event) // Привязывание обработчика события к элементуelement.addEventListener("mousemove", getMousePosition);Poté spojíme obslužnou rutinu události mousemove s položkou, abychom získali souřadnice myši při každém jejím pohybu uvnitř tohoto prvku.
Vytvoření HTML prvku pro zobrazení souřadnic myši
K tomu přidáme následující HTML kód:
V tomto kódu jsme vytvořili paragraf s identifikátorem "coordinates". Tento identifikátor použijeme k získání přístupu k této položce prostřednictvím JavaScriptu.
Aplikace CSS pro stylizaci zobrazení souřadnic myši
Když jsme se dozvěděli, jak získat aktuální souřadnice myši na obrazovce, můžete začít s jejich stylizací pomocí CSS.
Pomocí CSS lze měnit barvu, pozadí, písmo a další atributy zobrazení souřadnic myši. Chcete-li to provést, musíte použít třídu nebo identifikátor na položku obsahující souřadnice a určit požadované vlastnosti stylů.
Chcete-li například změnit barvu textu souřadnic myši na červenou, můžete použít následující CSS kód:
.coordinates
K instalaci dalších atributů a stylů lze použít příslušné vlastnosti CSS, jako jsou background, font-family, font-size a další.
Kromě přímého použití stylů na prvek lze také použít pseudoelementy, jako jsou ::before a ::after, vytvořit další prvky nebo dekorace kolem souřadnic myši.
Pro vývojáře je snazší porozumět stylům a jejich aplikaci, pokud použijete třídy nebo identifikátory, abyste jasně určili, na který prvek se styly vztahují.
Aplikace CSS pro stylizaci zobrazení souřadnic myši tak umožňuje vytvářet jedinečná a poutavá rozhraní a také zlepšovat jejich vizuální dojem a funkčnost.