Comment changer le pointeur de la souris à l'aide de JavaScript

Les pointeurs ou curseurs de souris sont agrandir, Dézoomer, texte, attendez, aiguille, aider, interdit, et beaucoup plus. Il est utilisé pour informer les utilisateurs des actions de souris qui peuvent être effectuées n'importe où, telles que la copie de contenu, les tables de redimensionnement, les cellules, la sélection de texte, etc. Le curseur ou le pointeur de la souris peut être modifié à l'aide du CSS "le curseur»Propriété en JavaScript à l'aide de l'objet de document en définissant la valeur sur«document.corps.style.le curseur".

Cet article démontrera la procédure de modification du pointeur de la souris à l'aide de JavaScript.

Comment changer le pointeur de la souris à l'aide de JavaScript?

Pour changer le pointeur de la souris, utilisez le «le curseur»Propriété en JavaScript. Il existe plusieurs types de curseur prédéfinis accessibles en javascript. Quelques-uns sont «aiguille","interdit","défaut","redimensionner", et "déplacer". Les icônes de ces pointeurs de souris couramment utilisés sont indiqués dans le tableau ci-dessous:

Syntaxe

Suivez la syntaxe donnée pour modifier le pointeur de la souris pour utiliser le «le curseur" propriété:

document.style.curseur = valeur;

Ici le "valeur«Est le nom prédéfini du curseur:

Exemple 1: Modifiez le pointeur de la souris à l'aide de getElementById ()

Modifiez le pointeur de la souris sur un texte spécifique, utilisez le javascript "le curseur»Propriété avec le«getElementByid ()”Méthode, qui va récupérer l'élément à l'aide de son identifiant attribué.

Syntaxe

Utilisez la syntaxe suivante pour modifier le pointeur de la souris sur un texte spécifique:

document.getElementsbyid (id).style.curseur = valeur;

Ici:

• "identifiant"L'ID attribué de l'élément est-il utilisé pour récupérer l'élément spécifique.
• "le curseur«La propriété JavaScript est-elle pour modifier le pointeur de la souris.

Dans le fichier html, créez une liste non ordonnée où, le pointeur de la souris change sur le survol du texte:

Pointeur de souris

• Aiguille


• Déplacer


• Interdit


• Progrès


• Résidication de colonne


• Cellule


• Texte


• Attendez


• Agrandir


• Dézoomer

La sortie affiche la liste non ordonnée où le pointeur de la souris changera lorsque la souris plane sur les éléments de la liste:

Maintenant en Tag, récupérez les éléments de la liste à l'aide de leur identifiant attribué, puis modifiez le pointeur de la souris à l'aide "le curseur" propriété:

document.getElementByid ("pointeur").style.cursor = "pointeur";
document.GetElementByid ("Move").style.Cursor = "Move";
document.GetElementByid ("non alloqué").style.Cursor = "Not-Allowed";
document.getElementByid ("progrès").style.Cursor = "Progress";
document.GetElementByid ("Col-Resize").style.cursor = "col-résiSize";
document.getElementByid ("cellule").style.cursor = "cellule";
document.getElementByid ("texte").style.cursor = "texte";
document.getElementByid ("attendre").style.cursor = "attendre";
document.getElementByid ("zoom-in").style.cursor = "zoom-in";
document.getElementByid ("zoom-out").style.cursor = "zoom-out";
document.getElementByid ("par défaut").style.cursor = "default";

Sortir

Exemple 2: Modifiez le pointeur de la souris à l'aide de la méthode QueySelector ()

Dans l'exemple suivant, modifiez le pointeur de la souris sur n'importe quel élément sans attribuer un ID, en utilisant le «QuerySelector ()" méthode. Il faut un argument "sélecteur«C'est l'élément HTML où le curseur / pointeur changera lorsque le curseur planera dessus.

Syntaxe

Suivez la syntaxe donnée pour modifier le pointeur de la souris sur un élément spécifique:

document.QuerySelectorall (sélecteurs).style.curseur = valeur;

Créez un bouton et attachez un "sur clic»Événement avec lui, qui appellera la fonction nommée«clicktoload ()»:

Pointeur de souris

Chargement

Définir une fonction "clicktoload ()», Modifiez le pointeur de la souris sur un bouton cliquer à l'aide du javascript«le curseur«Propriété avec«QuerySelector ()«Méthode en passant un«bouton«En tant que sélecteur:

fonction clicktoload ()
document.QuerySelector ("bouton").style.cursor = "attendre";

La sortie montre un «progrès / attendre”Cursor sur le bouton CLIC:

Exemple 3: Modifiez le pointeur de la souris à l'aide de GetElementsByTagName ()

Ici, appliquez le pointeur de la souris sur un élément en utilisant le nom de balise à l'aide du «getElementsByTagName ()" méthode. Il définira le pointeur de la souris sur l'élément sans événement onClick.

Syntaxe

Pour définir le pointeur de la souris sur les éléments à l'aide d'un nom de balise, utilisez la syntaxe-donnée.

document.GetElementsByTagName (TagName).style.curseur = valeur;

Créez un bouton à l'aide de la balise du bouton HTML:

Avertissement

Appeler le "getElementsByTagName ()"Méthode en passant le nom de la balise"bouton»Et définir l'index 0 qui indique l'appliquer uniquement au premier bouton de la page Web:

document.getElementsByTagName ("bouton") [0].style.Cursor = "Not-Allowed";

La sortie indique que lorsque le curseur arrive au «Avertissement”Bouton, le curseur changera:

Conclusion

Pour changer le pointeur de la souris, le «style.le curseur" la propriété modifie la valeur en JavaScript. Il définit le curseur de la souris pendant que le pointeur est sur l'élément spécifié. Vous pouvez utiliser cette propriété avec différentes méthodes JavaScript, y compris, GetElementById (), la méthode, la méthode QueySelector () et la méthode GetElementsByTagName () en fonction de la situation. Cet article a démontré la procédure pour modifier le pointeur de la souris à l'aide de JavaScript.