Cómo cambiar el puntero del mouse usando JavaScript

Los punteros o cursores del mouse son acercarse, disminuir el zoom, texto, esperar, puntero, ayuda, No permitido, y muchos más. Se utiliza para informar a los usuarios sobre las acciones del mouse que se pueden realizar en cualquier lugar, como copiar contenido, cambiar el tamaño de las tablas, celdas, selección de texto, etc. El cursor o puntero del mouse se puede modificar utilizando el CSS "cursor"Propiedad en JavaScript con la ayuda del objeto de documento estableciendo el valor en el"documento.cuerpo.estilo.cursor".

Este artículo demostrará el procedimiento para cambiar el puntero del mouse usando JavaScript.

Cómo cambiar el puntero del mouse usando JavaScript?

Para cambiar el puntero del mouse, use el "cursor"Propiedad en JavaScript. Hay múltiples tipos de cursor predefinidos accesibles en JavaScript. Algunos de ellos son "puntero","No permitido","por defecto","cambiar de tamaño", y "mover". Los iconos de estos punteros de mouse comúnmente utilizados se muestran en la tabla a continuación:

Sintaxis

Siga la sintaxis dada para cambiar el puntero del mouse para usar el "cursor" propiedad:

documento.estilo.cursor = valor;

Aquí el "valor"Es el nombre predefinido del cursor:

Ejemplo 1: Cambie el puntero del mouse usando el método getElementById ()

Cambie el puntero del mouse en un texto específico, use el JavaScript "cursor"Propiedad con el"getElementById ()Método ", que obtendrá el elemento con la ayuda de su ID asignada.

Sintaxis

Use la siguiente sintaxis para cambiar el puntero del mouse en un texto específico:

documento.GetElementsById (ID).estilo.cursor = valor;

Aquí:

• "identificación"¿Es la identificación asignada del elemento que se usa para obtener el elemento específico.
• "cursor"¿Es la propiedad JavaScript para cambiar el puntero del mouse.

En el archivo HTML, cree una lista desordenada donde, el puntero del mouse cambia en el desplazamiento del texto:

Puntero del ratón

• Puntero


• Mover


• No permitido


• Progreso


• Retrato de columna


• Celúla


• Texto


• Esperar


• Acercarse


• Disminuir el zoom

La salida muestra la lista desordenada donde cambiará el puntero del mouse cuando el mouse se cierne sobre los elementos de la lista:

Ahora en Etiqueta, obtenga los elementos de la lista con la ayuda de su ID asignada y luego cambie el puntero del mouse usando "cursor" propiedad:

documento.GetElementById ("Pointer").estilo.cursor = "puntero";
documento.getElementById ("Move").estilo.cursor = "mover";
documento.getElementById ("no permitido").estilo.cursor = "no permitido";
documento.getElementById ("progreso").estilo.cursor = "progreso";
documento.getElementById ("col-rese").estilo.cursor = "col-rese";
documento.getElementById ("celda").estilo.cursor = "celda";
documento.getElementById ("texto").estilo.cursor = "texto";
documento.getElementByid ("espera").estilo.cursor = "espera";
documento.GetElementById ("Zoom-In").estilo.cursor = "zoom-in";
documento.getElementById ("zoom-out").estilo.cursor = "zoom-out";
documento.getElementById ("predeterminado").estilo.cursor = "predeterminado";

Producción

Ejemplo 2: Cambie el puntero del mouse usando el método QuerySelector ()

En el siguiente ejemplo, cambie el puntero del mouse en cualquier elemento sin asignar una ID, utilizando el "QuerySelector ()" método. Se necesita una discusión "selector"Ese es el elemento HTML donde cambiará el cursor/puntero cuando el cursor se desplazará sobre él.

Sintaxis

Siga la sintaxis dada para cambiar el puntero del mouse en un elemento específico:

documento.QuerySelectorAll (selectores).estilo.cursor = valor;

Crea un botón y adjunte un "al hacer clic"Evento con él, que llamará a la función llamada"clicktoload ()":

Puntero del ratón

Cargando

Defina una función "clicktoload ()", Cambie el puntero del mouse en un botón Haga clic usando el JavaScript"cursor"Propiedad con"QuerySelector ()"Método al pasar un"botón"Como selector:

función clicktoload ()
documento.QuerySelector ("botón").estilo.cursor = "espera";

La salida muestra un "progreso/espera"Cursor en el botón Haga clic:

Ejemplo 3: Cambie el puntero del mouse usando el método GetElementsByTagName ()

Aquí, aplique el puntero del mouse en un elemento usando el nombre de la etiqueta con la ayuda del "getElementsBytagName ()" método. Establecerá el puntero del mouse en el elemento sin un evento OnClick.

Sintaxis

Para establecer el puntero del mouse en los elementos con un nombre de etiqueta, use la sintaxis dada a continuación.

documento.getElementsBytagName (TagName).estilo.cursor = valor;

Cree un botón con la etiqueta del botón HTML:

Advertencia

Llama a "getElementsBytagName ()"Método pasando el nombre de la etiqueta"botón"Y establecer el índice 0 Lo que indica aplicarlo solo al primer botón en la página web:

documento.getElementsByTagName ("Botón") [0].estilo.cursor = "no permitido";

La salida indica que cuando el cursor llega al "Advertencia"Botón, el cursor cambiará:

Conclusión

Para cambiar el puntero del mouse, el "estilo.cursor" La propiedad cambia el valor en JavaScript. Establece el cursor del mouse mientras el puntero está en el elemento especificado. Puede usar esta propiedad con diferentes métodos de JavaScript que incluyen el método GetElementById (), QuerySelector () y el método GetElementSByTagName () dependiendo de la situación. Este artículo demostró el procedimiento para cambiar el puntero del mouse usando JavaScript.