如何在 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 程式碼的主體

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

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

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

宣告樣式

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

宣告指令碼

  • 我們將使用指令碼中的 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 以稍後識別它。

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

在指令碼中，我們建立了 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-07

151 次檢視

啟動你的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.