如何使用 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+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告