如何使用 JavaScript 设置鼠标指针的光标类型？

在本教程中，我们将学习如何使用 JavaScript 设置鼠标指针的光标类型。要设置光标类型，请使用 JavaScript 中的 `cursor` 属性。它允许您在按钮点击时更改光标。

我们甚至可以使用 JavaScript 更改光标类型。不同类型的光标具有不同的含义。在我们的网页上可以使用许多样式的光标。

让我们看看如何使用 JavaScript 设置鼠标指针的光标类型。

使用样式 cursor 属性

cursor 属性用于设置鼠标指针显示的光标类型。这些样式指示鼠标所在元素的当前处理状态或类型。

语法

我们可以遵循以下语法使用 JavaScript 设置鼠标指针显示的光标类型。

var element = document.getElementById(" <Type ID here> ");
element.style.cursor = Wait || Help || Move || Pointer || Crosshair || Cell || None ;

您可以遵循上述语法来设置光标类型。

参数

  • wait − 指示程序繁忙，我们必须等待。光标看起来像一个圆形的蓝色形状。

  • help − 指示我们可以获得帮助。光标看起来像带有箭头指针的问号。

  • move − 指示我们可以移动对象。光标看起来像两条在中心相交的线。

  • pointer − 指示我们将光标放在链接上。光标看起来像一只手，食指向上指。

  • crosshair − 指示我们可以选择部分内容。光标看起来像两条相交的线段。

  • cell − 指示我们将光标放在单元格上，可以选择它。光标看起来像一个加号。

  • none − 没有渲染光标。

示例 1

您可以尝试运行以下代码来使用 JavaScript 设置鼠标指针显示的光标类型。

<!DOCTYPE html>
<html>
<body>
   <h1 id="myID">Heading 1</h1>
   <p>Check the heading before and after mouse hover.</p>
   <button type="button" onclick="display()">Click to change the cursor</button>
   <script>
      function display() {
         document.getElementById("myID").style.cursor = "pointer";
      }
   </script>
</body>
</html>

示例 2

在这个例子中，我们添加了一个包含光标样式的下拉菜单。我们将选择要显示的光标样式。点击按钮后，我们将样式应用于下拉菜单中选择的光标。

<html>
<body>
   <h2> Use <i> cursor property </i> to set the type of cursor to display </h2>
   <div id = "container">
      Select the type of cursor: <br>
      <select id = "selected_value">
         <option value = "wait"> wait </option>
         <option value = "help"> help </option>
         <option value = "move"> move </option>
         <option value = "pointer"> pointer </option>
         <option value = "crosshair"> crosshair </option>
         <option value = "cell"> cell </option>
         <option value = "none"> none </option>
      </select>
      <button id = "btn">Submit</button>
   </div>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      function func(){
         var div = document.getElementById("container");
         var cursor_type = document.getElementById("selected_value").value;
         document.body.style.cursor = cursor_type;
         if(document.getElementById("ids")){
            document.getElementById("ids").remove();
         }
         var para = document.createElement("p");
         para.id = "ids"
         para.innerHTML = "Type of the cursor: " + cursor_type;
         div.appendChild(para);
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们使用了 `cursor` 属性来设置要显示的鼠标指针光标类型。

示例 3

在下面的示例中，我们已将所有光标样式添加到一个数组中。我们使用了 `setInterval` 方法来定期执行一个函数。在一个函数中，我们从数组的每个元素设置光标样式。因此，点击按钮后，我们将光标样式逐个更改，间隔一段时间。

<html>
<body>
   <h2> Use <i> cursor property </i> to set the type of cursor to display </h2>
   <div id = "container">
      <button id = "btn"> Changing cursors </button>
   </div>
   <script>
      var i = 0;
      document.getElementById("btn").addEventListener("click", func);
      var types = ["wait", "help", "move", "pointer", "none", "crosshair", "cell"];
      function func(){
         timer = setInterval(function(){
            if(i < types.length){
               document.body.style.cursor = types[i];
               console.log(types[i]);
               i++;
            }else{
               i = 0;
               func();
            }
         },2000);
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到光标样式在一个特定的间隔后从一个样式更改为另一个样式。

在本教程中，我们学习了如何使用 JavaScript 设置鼠标指针显示的光标类型。

更新于：2022年10月12日

2K+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告