如何使用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+ 次檢視

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告