Como alterar o ponteiro do mouse usando JavaScript

Os ponteiros ou cursores do mouse são mais Zoom, Reduzir o zoom, texto, espere, ponteiro, ajuda, não permitido, e muitos mais. É usado para informar os usuários sobre ações do mouse que podem ser executadas em qualquer lugar, como copiar conteúdo, redes de capital, células, seleção de texto etc. O cursor ou ponteiro do mouse pode ser modificado usando o CSS “cursor”Propriedade em JavaScript com a ajuda do objeto Document, definindo o valor como“documento.corpo.estilo.cursor”.

Este artigo demonstrará o procedimento para alterar o ponteiro do mouse usando JavaScript.

Como alterar o ponteiro do mouse usando JavaScript?

Para mudar o ponteiro do mouse, use o “cursorPropriedade em JavaScript. Existem vários tipos de cursor predefinidos acessíveis em JavaScript. Alguns deles são “ponteiro","não permitido","padrão","redimensionar", e "mover”. Os ícones desses ponteiros de mouse comumente usados ​​são mostrados na tabela abaixo:

Sintaxe

Siga a sintaxe dada para alterar o ponteiro do mouse para usar o “cursor" propriedade:

documento.estilo.cursor = valor;

Aqui o "valorӃ o nome predefinido do cursor:

Exemplo 1: Altere o ponteiro do mouse usando o método getElementById ()

Altere o ponteiro do mouse em um texto específico, use o javascript “cursor”Propriedade com a“getElementById ()”Método, que buscará o elemento com a ajuda de seu ID designado.

Sintaxe

Use a sintaxe a seguir para alterar o ponteiro do mouse em um texto específico:

documento.getElementsbyId (id).estilo.cursor = valor;

Aqui:

• ““eu ia”É o ID atribuído do elemento que é usado para buscar o elemento específico.
• ““cursor”É a propriedade JavaScript para alterar o ponteiro do mouse.

No arquivo HTML, crie uma lista não ordenada onde o ponteiro do mouse muda no pau do texto:

Ponteiro do mouse

• Ponteiro


• Mover


• Não permitido


• Progresso


• Coluna-ressente


• Célula


• Texto


• Espere


• Mais Zoom


• Reduzir o zoom

A saída mostra a lista não ordenada em que o ponteiro do mouse mudará quando o mouse pague sobre os itens da lista:

Agora em Tag, busque os itens da lista com a ajuda de seu ID atribuído e depois altere o ponteiro do mouse usando “cursor" propriedade:

documento.getElementById ("ponteiro").estilo.cursor = "ponteiro";
documento.getElementById ("move").estilo.cursor = "mover";
documento.getElementById ("não-permitido").estilo.cursor = "não-superado";
documento.getElementById ("Progresso").estilo.cursor = "progresso";
documento.getElementById ("col-resize").estilo.cursor = "col-resizize";
documento.getElementById ("célula").estilo.cursor = "célula";
documento.getElementById ("texto").estilo.cursor = "texto";
documento.getElementById ("espera").estilo.cursor = "aguarde";
documento.getElementById ("Zoom-in").estilo.cursor = "zoom-in";
documento.getElementById ("Zoom-out").estilo.cursor = "zoom-out";
documento.getElementById ("padrão").estilo.cursor = "padrão";

Saída

Exemplo 2: Alterar o ponteiro do mouse usando o método querySelector ()

No exemplo a seguir, altere o ponteiro do mouse em qualquer elemento sem atribuir um ID, utilizando o “QuerySelector ()”Método. É preciso um argumento “Seletor”Esse é o elemento html em que o cursor/ponteiro mudará quando o cursor passará por ele.

Sintaxe

Siga a sintaxe dada para alterar o ponteiro do mouse em um elemento específico:

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

Crie um botão e anexe um “ONCLICK”Evento com ele, que chamará a função chamada“clicktoload ()”:

Ponteiro do mouse

Carregando

Defina uma função “clicktoload ()”, Altere o ponteiro do mouse em um botão Clique em usar o JavaScript“cursor”Propriedade com“QuerySelector ()”Método, passando um“botão”Como seletor:

função clicktoload ()
documento.QuerySelector ("Button").estilo.cursor = "aguarde";

A saída mostra um “progresso/espera”Cursor no botão Clique:

Exemplo 3: Altere o ponteiro do mouse usando o método getElementsByTagName ()

Aqui, aplique o ponteiro do mouse em um elemento usando o nome da tag com a ajuda do “getElementsByTagName ()”Método. Ele definirá o ponteiro do mouse no elemento sem um evento OnClick.

Sintaxe

Para definir o ponteiro do mouse em elementos usando um nome de tag, use a sintaxe abaixo dada.

documento.getElementsByTagName (Tagname).estilo.cursor = valor;

Crie um botão usando o botão HTML:

Aviso

Ligar para "getElementsByTagName ()”Método passando o nome da tag“botão”E definir o índice 0 que indica aplicá -lo apenas ao primeiro botão na página da web:

documento.getElementsByTagName ("Button") [0].estilo.cursor = "não-superado";

A saída indica que quando o cursor chega ao “Aviso”Button, o cursor mudará:

Conclusão

Para mudar o ponteiro do mouse, o “estilo.cursor" A propriedade altera o valor em JavaScript. Ele define o cursor do mouse enquanto o ponteiro está no elemento especificado. Você pode usar esta propriedade com diferentes métodos JavaScript, incluindo o método getElementById (), o método queryselector () e o método getElementsByTagName (), dependendo da situação. Este artigo demonstrou o procedimento para alterar o ponteiro do mouse usando JavaScript.