Jak zmienić wskaźnik myszy za pomocą JavaScript

Wskaźniki lub kursory myszy są zbliżenie, powiększenie, tekst, Czekać, wskaźnik, pomoc, niedozwolony, i wiele więcej. Służy do informowania użytkowników o działaniach myszy, które można wykonywać w dowolnym miejscu, takie jak kopiowanie treści, tabele rozmiaru, komórki, wybór tekstu itp. Kursor lub wskaźnik myszy można zmodyfikować za pomocą CSS ”kursor„Własność w JavaScript za pomocą obiektu dokumentu poprzez ustawianie wartości na„dokument.ciało.styl.kursor".

W tym artykule pokazuje procedurę zmiany wskaźnika myszy za pomocą JavaScript.

Jak zmienić wskaźnik myszy za pomocą JavaScript?

Aby zmienić wskaźnik myszy, użyj „kursor„Własność w JavaScript. Istnieje wiele predefiniowanych typów kursorów dostępnych w JavaScript. Kilka z nich to „wskaźnik”,„niedozwolony”,„domyślny”,„Zmień rozmiar", I "przenosić". Ikony tych powszechnie używanych wskaźników myszy pokazano w poniższej tabeli:

Składnia

Postępuj zgodnie z podaną składnią, aby zmienić wskaźnik myszy, aby użyć „kursor" nieruchomość:

dokument.styl.cursor = wartość;

Tutaj "wartość”Jest predefiniowaną nazwą kursora:

Przykład 1: Zmień wskaźnik myszy za pomocą metody getElementById ()

Zmień wskaźnik myszy na określonym tekście, użyj JavaScript „kursor„Nieruchomość z„getElementById ()„Metoda, która przyniesie element za pomocą przypisanego identyfikatora.

Składnia

Użyj następującej składni, aby zmienić wskaźnik myszy w określonym tekście:

dokument.getElementsById (id).styl.cursor = wartość;

Tutaj:

• "ID”To przypisany identyfikator elementu, który służy do pobrania określonego elementu.
• "kursor”Jest właściwością JavaScript, która może zmienić wskaźnik myszy.

W pliku HTML utwórz listę nieopisaną, w której wskaźnik myszy zmienia się na zawisie tekstu:

Wskaźnik myszy

• Wskaźnik


• Przenosić


• Niedozwolony


• Postęp


• Zniszczenie kolumny


• Komórka


• Tekst


• Czekać


• Zbliżenie


• Powiększenie

Dane wyjściowe pokazuje listę nieopisaną, w której wskaźnik myszy zmieni się, gdy mysz unosi się na elementy listy:

Teraz w Tag, pobieraj pozycje listy za pomocą przypisanego identyfikatora, a następnie zmień wskaźnik myszy za pomocą „kursor" nieruchomość:

dokument.getElementById („wskaźnik”).styl.cursor = „wskaźnik”;
dokument.getElementById („ruch”).styl.cursor = "ruch";
dokument.getElementById („nie ujmowany”).styl.cursor = „nie-ujmowany”;
dokument.getElementById („postęp”).styl.cursor = „postęp”;
dokument.getElementById („col-resize”).styl.cursor = "col-resize";
dokument.getElementById („komórka”).styl.cursor = „komórka”;
dokument.getElementById („tekst”).styl.cursor = "text";
dokument.GetElementById („Wait”).styl.cursor = „Wait”;
dokument.getElementById („Zoom-in”).styl.cursor = „Zoom-in”;
dokument.getElementById („Zoomout”).styl.cursor = „zoom-out”;
dokument.getElementById („domyślnie”).styl.cursor = „domyślny”;

Wyjście

Przykład 2: Zmień wskaźnik myszy za pomocą metody QuerySelelect ()

W poniższym przykładzie zmień wskaźnik myszy na dowolnym elemencie bez przypisania identyfikatora, używając „QuerySelelect ()" metoda. To wymaga argumentu „selektor„To jest element HTML, w którym kursor/wskaźnik zmieni się, gdy kursor unosi się nad nim.

Składnia

Postępuj zgodnie z podaną składnią, aby zmienić wskaźnik myszy na określonym elemencie:

dokument.querySelelectionAll (selektory).styl.cursor = wartość;

Utwórz przycisk i dołącz „na kliknięcie„Zdarzenie z nim, które wywoła funkcję o nazwie„ClickToload ()”:

Wskaźnik myszy

Ładowanie

Zdefiniuj funkcję „ClickToload ()”, Zmień wskaźnik myszy na przycisku Kliknij za pomocą JavaScript„kursor„Nieruchomość z„QuerySelelect ()„Metoda, przekazując„przycisk„Jako selektor:

Funkcja ClickToload ()
dokument.querySelelector („przycisk”).styl.cursor = „Wait”;

Wyjście pokazuje „postęp/czekaj”Kursor przycisku Kliknij:

Przykład 3: Zmień wskaźnik myszy za pomocą metody getelementsBaTagname ()

Tutaj zastosuj wskaźnik myszy na element za pomocą nazwy znacznika za pomocą „getElementsBaTagname ()" metoda. Ustawia wskaźnik myszy na elemencie bez zdarzenia OnClick.

Składnia

Aby ustawić wskaźnik myszy na elementach za pomocą nazwy znacznika, użyj poniżej podanej składni.

dokument.getElementsByTagname (tagname).styl.cursor = wartość;

Utwórz przycisk za pomocą znacznika przycisku HTML:

Ostrzeżenie

Zadzwoń do "getElementsBaTagname ()„Metoda, przekazując nazwę znacznika”przycisk”I ustawianie indeksu 0 co wskazuje, zastosuj to tylko do pierwszego przycisku na stronie internetowej:

dokument.getElementsBaTagName („przycisk”) [0].styl.cursor = „nie-ujmowany”;

Wyjście wskazuje, że kiedy kursor dojdzie do „Ostrzeżenie„Przycisk, kursor zmieni się:

Wniosek

Aby zmienić wskaźnik myszy, „styl.kursor" właściwość zmienia wartość w JavaScript. Ustawia kursor myszy, podczas gdy wskaźnik znajduje się na określonym elemencie. Możesz użyć tej właściwości z różnymi metodami JavaScript, w tym metodą getElementById (), metodą QuerySelelection () i metodą getElementByTagname () w zależności od sytuacji. W tym artykule pokazano procedurę zmiany wskaźnika myszy za pomocą JavaScript.