Hvordan endre musepekeren ved hjelp av JavaScript

Muspekerne eller markørene er zoom inn, zoome ut, tekst, vente, peker, hjelp, ikke tillatt, og mange flere. Den brukes til å informere brukere om mushandlinger som kan utføres hvor som helst, for eksempel kopiering av innhold, endre størrelse på tabeller, celler, tekstvalg, etc. Musmarkøren eller pekeren kan endres ved hjelp av CSS “markør”Eiendom i JavaScript ved hjelp av dokumentobjektet ved å sette verdien til“dokument.kropp.stil.markør”.

Denne artikkelen vil demonstrere prosedyren for å endre musepekeren ved hjelp av JavaScript.

Hvordan endre musepekeren ved hjelp av JavaScript?

For å endre musepekeren, bruk "markør”Eiendom i JavaScript. Det er flere forhåndsdefinerte markørtyper tilgjengelige i JavaScript. Noen få av dem er “peker”,“ikke tillatt”,“misligholde”,“Endre størrelse”, Og“bevege seg”. Ikonene til disse ofte brukte musepekerne vises i tabellen nedenfor:

Syntaks

Følg den gitte syntaks for å endre musepekeren for å bruke “markør”Eiendom:

dokument.stil.markør = verdi;

Her, "verdi”Er det forhåndsdefinerte navnet på markøren:

Eksempel 1: Endre musepekeren ved hjelp av getElementById () -metode

Endre musepekeren på en bestemt tekst, bruk JavaScript “markør”Eiendom med“getElementById ()”Metode, som vil hente elementet ved hjelp av den tildelte ID -en.

Syntaks

Bruk følgende syntaks for å endre musepekeren på en bestemt tekst:

dokument.GetElementsById (ID).stil.markør = verdi;

Her:

• “id”Er elementets tildelte ID som brukes til å hente det spesifikke elementet.
• “markør”Er JavaScript -egenskapen for å endre musepekeren.

I HTML -filen oppretter du en uordnet liste der musepekeren endres på hoveren av tekst:

Muspekeren

• Peker


• Bevege seg


• Ikke tillatt


• Framgang


• Kolonne-størrelse


• Celle


• Tekst


• Vente


• Zoom inn


• Zoome ut

Utgangen viser den uordnede listen der musepekeren vil endre seg når musen svever over listeelementene:

Nå i Tag, hent listeelementene ved hjelp av deres tildelte ID, og ​​bytt deretter musepekeren ved å bruke "markør”Eiendom:

dokument.getElementById ("Pointer").stil.Cursor = "Pointer";
dokument.getElementById ("Flytt").stil.Cursor = "Move";
dokument.GetElementById ("Not-Appleed").stil.Cursor = "Not-tillatt";
dokument.getElementById ("Progress").stil.Cursor = "Progress";
dokument.GetElementById ("Col-R-Stize").stil.Cursor = "Col-R-Stize";
dokument.getElementById ("Cell").stil.Cursor = "Cell";
dokument.getElementById ("tekst").stil.Cursor = "tekst";
dokument.getElementById ("Vent").stil.Cursor = "Vent";
dokument.getElementById ("Zoom-in").stil.Cursor = "zoom-in";
dokument.GetElementById ("Zoom-Out").stil.Cursor = "Zoom-Out";
dokument.getElementById ("Standard").stil.Cursor = "Standard";

Produksjon

Eksempel 2: Endre musepekeren ved å bruke QuerySelector () -metoden

I det følgende eksempel, endre musepekeren på noe element uten å tildele en ID, ved å bruke "QuerySelector ()”Metode. Det krever et argument "velger”Det er HTML -elementet der markøren/pekeren vil endre seg når markøren vil sveve over den.

Syntaks

Følg den gitte syntaks for å endre musepekeren på et spesifikt element:

dokument.QuerySelectorAll (Selectors).stil.markør = verdi;

Lag en knapp og fest en “ved trykk”Arrangement med det, som vil kalle funksjonen som heter“ClickToload ()”:

Muspekeren

Lasting

Definere en funksjon “ClickToload ()”, Endre musepekeren på et knappeklikk ved å bruke JavaScript”markør”Eiendom med“QuerySelector ()”Metode ved å passere en“knapp”Som en velger:

funksjon clickToload ()
dokument.QuerySelector ("Button").stil.Cursor = "Vent";

Utgangen viser en “fremgang/vent”Markør på knappeklikk:

Eksempel 3: Endre musepekeren ved hjelp av getElementsbyTagName () -metode

Her kan du bruke musepekeren på et element ved hjelp av tagnavnet ved hjelp av "getElementsByTagName ()”Metode. Den vil stille musepekeren på elementet uten en OnClick -hendelse.

Syntaks

For å stille inn musepekeren på elementer ved hjelp av et tagnavn, bruk syntaksen nedenfor.

dokument.getElementsByTagName (tagname).stil.markør = verdi;

Opprett en knapp ved hjelp av HTML -knappekoden:

Advarsel

Ring "getElementsByTagName ()”Metode ved å passere tagnavnet”knapp”Og sette indeksen 0 som indikerer, bruk den bare på den første knappen på websiden:

dokument.getElementsByTagName ("Button") [0].stil.Cursor = "Not-tillatt";

Utgangen indikerer at når markøren kommer til “Advarsel”Knapp, markøren vil endre seg:

Konklusjon

For å endre musepekeren, “stil.markør ” Eiendom endrer verdien i JavaScript. Den setter musemarkøren mens pekeren er på det spesifiserte elementet. Du kan bruke denne egenskapen med forskjellige JavaScript -metoder inkludert, getElementById () -metode, QuerySelector () -metode og GetElementSByTagName () -metoden avhengig av situasjonen. Denne artikkelen demonstrerte prosedyren for å endre musepekeren ved hjelp av JavaScript.