Cursor de la propiedad en JavaScript

JavaScript | Cursor Propiedad : Aquí, vamos a aprender acerca de la propiedad cursor en JavaScript con la sintaxis y ejemplos .

JavaScript | Cursor Propiedad

El propiedad cursor en JavaScript se utiliza para cambiar el estilo del puntero del cursor visualizado en la pantalla. En este artículo, vamos a ver el número de estilos de puntero del cursor disponibles para nosotros y cómo cambiar estos estilos mediante la propiedad cursor.

Tenemos las siguientes propiedades class el estilo del cursor,

  • esperar
  • ayuda
  • mover
  • puntero
  • punto de mira
  • celular
  • ninguno

El General sintaxis for esto es,

    object.style.cursor="cursor property";

ir Vamos adelante y tratar estas propiedades a cabo.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Focus method</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: palevioletred;
}
.box {
position: absolute;
width: 200px;
height: 200px;
background: rgb(230, 230, 124);
padding: 2px;
margin: 2px;
left: 500px;
top: 200px;
}
</style>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
<script>
</script>
</html>

salida

Cursor Property in JavaScript - 4

Cuando nos movemos nuestra cursor sobre el cuadro amarillo, nuestra cursor adquirirá diferentes propiedades o el estilo de nuestro cursor cambiará. Todo lo que tenemos que hacer es conseguir una referencia a la caja dentro de amarillo y establecer diferentes propiedades de estilo for el cursor. try de dejar salir el uno espera,

<script>
document.querySelector('.box').style.cursor = "wait";
</script>

salida

Cursor Property in JavaScript - 5

<script>
document.querySelector('.box').style.cursor = "help";
</script>

salida

Cursor Property in JavaScript - 6

<script>
document.querySelector('.box').style.cursor = "move";
</script>

salida

Cursor Property in JavaScript - 7

<script>
document.querySelector('.box').style.cursor = "pointer";
</script>

salida

Cursor Property in JavaScript - 8

de esta manera usted puede probar todas las propiedades del cursor del en JavaScript . También puede recordar que esta propiedad se utiliza para proporcionar retroalimentación háptica para el usuario y se utilizó como una gran experiencia de usuario cada vez que un usuario tendría que esperar class algo a la carga, o una solicitud de ser enviado, o una ficha de información, etc.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *