如何在 JavaScript 中返回可見的定位元素部分？

本教程將講解如何在 JavaScript 中返回可見的定位元素部分。定位元素是在 JavaScript 或 Html 中具有某些已定義位置的元素，它可以是絕對位置（這意味著固定位置），也可以是任何相對位置。

為了只顯示已定義的部分，我們將使用任何元素的“style”屬性的“clip”屬性來裁剪、刪除或隱藏不需要的區域。我們將定義一個矩形區域並定義其需要裁剪的部分和需要保留的部分。

語法

我們已經瞭解瞭如何在 JavaScript 中返回可見的定位元素部分的基本知識。讓我們看看它的語法：

document.getElementById( Id_of_required_element ).style.clip = "rect(size_top size_right size_bottom size_left)";
document.write(document.getElementById(Id_of_required_element ).style.clip);

在上面的語法中，我們首先使用“document.getElementById”方法獲取所需的元素。然後，使用“style”屬性的“clip”屬性，我們定義了一個矩形區域，我們只需要檢視該區域，並提供了我們需要的所有四個方向的部分。

在下一步中，使用相同的屬性，我們獲取上一步中定義的位置以使用“rect”屬性顯示，並使用document.write屬性在文件中返回或列印。

演算法

我們已經瞭解了在 JavaScript 中返回可見的定位元素部分的基本語法。現在，讓我們來看完整的演算法，並定義一些基本步驟來說明如何準確地做到這一點：

建立 HTML 程式碼的主體

  • 首先，我們將定義一個元素並透過定義其樣式將其固定在一側。

  • 我們將使用 button 標籤建立一個按鈕，並定義一個 onclick 事件，該事件將呼叫display()函式。

  • display()函式在指令碼中定義，列印所需返回值的所有主要部分都在其中。

宣告樣式

  • 在 head 部分或使用內聯程式碼中，我們將向當前元素新增一些樣式以定義其相對於自身的相對位置，例如它將位於何處以及使其位置固定。

宣告指令碼

  • 我們將使用指令碼中的 function 關鍵字建立display()函式。

  • display()函式將包含透過使用 DOM 獲取第二個元素來設定第二個元素值的程式碼。

  • 使用document.getElementId()方法，我們將獲取第二個元素，並使用“style”屬性的“clip”方法設定我們想要看到的當前元素的部分。

  • 最後，我們將使用document.write()方法返回最終所需的值。

示例

在上述步驟中，我們已經看到了所需操作的完整演算法，現在讓我們來看一下完整的程式碼，以便更好地理解該演算法的實現：

<!DOCTYPE html>
<html>
<head>
   <style>
   img {
      position: absolute;
      top: 100px;
   }
   </style>
</head>
<body>
   <h3> How to return which part of a positioned element is visible in JavaScript? </h3>
   <button type = "button" onclick = "display()" > Click Me to Clip </button> <br>
   <img id = "newImg" src = "https://tutorialspoint.tw/videotutorials/images/tutor_connect_home.jpg" width = "170" height = "150" >
   <script>
      function display() {
         document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)";
      }
   </script>
</body>
</html>

在上面的程式碼中，我們首先定義了一個按鈕，透過使用 onclick 事件在點選時呼叫 display 函式。之後，我們定義了一個演示影像，以便稍後裁剪它。對於影像，我們定義了 id 以便稍後識別它。

在 head 部分，我們定義了影像的位置並固定了其頂部位置。最後，我們定義了程式的指令碼。

在指令碼中，我們建立了 display 函式，該函式將裁剪到提供的尺寸。

注意 − 在上面的程式碼中，我們只設置了影像的尺寸，稍後單擊按鈕後會在輸出中顯示，要獲取已定義的尺寸，我們只需編寫document.write()方法，它將返回新的尺寸。

確切的指令碼程式碼如下：

<script>
   function display() {
      document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)";
      document.write(document.getElementById("newImg").style.clip);
   }
</script>

結論

在本教程中，我們學習瞭如何在 JavaScript 中返回可見的定位元素部分。定位元素是在 JavaScript 或 Html 中具有某些已定義位置的元素，它可以是絕對位置（這意味著固定位置），也可以是任何相對位置。為了只顯示所需區域，我們使用任何元素的“style”屬性的“clip”屬性刪除了其他部分。

更新於：2022年11月7日

瀏覽量：151

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.