Come cambiare il puntatore del mouse usando JavaScript

I puntatori o i cursori del topo sono ingrandire, Zoom-out, testo, Aspettare, Pointer, aiuto, non autorizzato, e molti altri. Viene utilizzato per informare gli utenti sulle azioni del mouse che possono essere eseguite ovunque, come la copia del contenuto, il ridimensionamento delle tabelle, le celle, la selezione del testo, ecc. Il cursore o il puntatore del mouse possono essere modificati usando il CSS "cursore"Proprietà in JavaScript con l'aiuto dell'oggetto documento impostando il valore su"documento.corpo.stile.cursore".

Questo articolo dimostrerà la procedura per modificare il puntatore del mouse usando JavaScript.

Come cambiare il puntatore del mouse usando JavaScript?

Per modificare il puntatore del mouse, usa il “cursore"Proprietà in JavaScript. Esistono più tipi di cursore predefiniti accessibili in JavaScript. Alcuni di loro sono "Pointer","non autorizzato","predefinito","ridimensionare", E "mossa". Le icone di questi puntatori di topo comunemente usati sono mostrate nella tabella seguente:

Sintassi

Segui la sintassi data per modificare il puntatore del mouse per utilizzare il "cursore" proprietà:

documento.stile.cursore = valore;

Qui, il "valore"È il nome predefinito del cursore:

Esempio 1: modificare il puntatore del mouse usando il metodo GetElementById ()

Cambia il puntatore del mouse su un testo specifico, usa JavaScript "cursore"Proprietà con il"getElementById ()"Metodo, che prenderà l'elemento con l'aiuto del suo ID assegnato.

Sintassi

Utilizzare la seguente sintassi per modificare il puntatore del mouse su un testo specifico:

documento.getElementsById (ID).stile.cursore = valore;

Qui:

• "id"È l'ID assegnato dell'elemento che viene utilizzato per recuperare l'elemento specifico.
• "cursore"È la proprietà JavaScript per cambiare il puntatore del mouse.

Nel file HTML, crea un elenco non ordinato in cui il puntatore del mouse cambia sull'hover del testo:

Puntatore del mouse

• Pointer


• Mossa


• Non autorizzato


• Progresso


• Ridimensionare la colonna


• Cellula


• Testo


• Aspettare


• Ingrandire


• Zoom-out

L'output mostra l'elenco non ordinato in cui il puntatore del mouse cambierà quando il mouse si libra sugli elementi dell'elenco:

Ora in Tag, prendi gli elementi dell'elenco con l'aiuto del loro ID assegnato e quindi modifica il puntatore del mouse usando "cursore" proprietà:

documento.getElementById ("puntatore").stile.cursore = "puntatore";
documento.getElementById ("MUST").stile.cursore = "mossa";
documento.getElementById ("non-tolorato").stile.cursore = "non-tolorato";
documento.getElementById ("Progressi").stile.cursore = "progresso";
documento.getElementById ("Col-Resize").stile.cursore = "col-resize";
documento.getElementById ("Cell").stile.cursore = "cell";
documento.getElementById ("Testo").stile.cursore = "testo";
documento.getElementById ("Wait").stile.cursore = "wait";
documento.getElementById ("Zoom-in").stile.cursore = "zoom-in";
documento.getElementById ("Zoom-Out").stile.cursore = "zoom-out";
documento.getElementById ("predefinito").stile.cursore = "predefinito";

Produzione

Esempio 2: modificare il puntatore del mouse usando il metodo QuerySelector ()

Nel seguente esempio, modifica il puntatore del mouse su qualsiasi elemento senza assegnare un ID, utilizzando il "QuerySelector ()" metodo. Ci vuole una discussione "selettore"Questo è l'elemento HTML in cui il cursore/puntatore cambierà quando il cursore si libra su di esso.

Sintassi

Seguire la sintassi data per modificare il puntatore del mouse su un elemento specifico:

documento.QuerySelectorAll (selettori).stile.cursore = valore;

Crea un pulsante e allega un "al clic"Evento con esso, che chiamerà la funzione denominata"ClickToload ()":

Puntatore del mouse

Caricamento

Definire una funzione "ClickToload ()", Cambia il puntatore del mouse su un pulsante Clicca usando JavaScript"cursore"Proprietà con"QuerySelector ()Metodo "passando un"pulsante"Come selettore:

funzione ClickToload ()
documento.QuerySelector ("Button").stile.cursore = "wait";

L'output mostra un "Progresso/Aspetta"Cursore sul pulsante Clicca:

Esempio 3: modifica il puntatore del mouse usando il metodo getElementsByTagname ()

Qui, applica il puntatore del mouse su un elemento usando il nome del tag con l'aiuto di "getElementsByTagName ()" metodo. Imposterà il puntatore del mouse sull'elemento senza un evento OnClick.

Sintassi

Per impostare il puntatore del mouse sugli elementi utilizzando un nome tag, utilizzare la sintassi di seguito data.

documento.getElementsByTagName (TagName).stile.cursore = valore;

Crea un pulsante utilizzando il tag pulsante HTML:

Avvertimento

Chiama il "getElementsByTagName ()"Metodo passando il nome del tag"pulsante"E impostare l'indice 0 che indica applicarlo solo al primo pulsante sulla pagina Web:

documento.getElementsByTagName ("Button") [0].stile.cursore = "non-tolorato";

L'output indica che quando il cursore arriva al "Avvertimento"Pulsante, il cursore cambierà:

Conclusione

Per cambiare il puntatore del mouse, il "stile.cursore" La proprietà modifica il valore in JavaScript. Imposta il cursore del mouse mentre il puntatore è sull'elemento specificato. È possibile utilizzare questa proprietà con diversi metodi JavaScript tra cui il metodo, il metodo GetElementById (), il metodo QuerySelector () e il metodo getElementsByTagname () a seconda della situazione. Questo articolo ha dimostrato la procedura per modificare il puntatore del mouse usando JavaScript.