如何在 JavaScript 中返回元素相對於浮動物件的定位？

本教程將教我們如何在 JavaScript 中返回元素相對於浮動物件的定位。要設定相對定位或獲取或返回相對定位，我們將使用 JavaScript 的“clear”屬性，該屬性定義在物件的 style 屬性下。

總共有四種相對定位：“left”、“right”、“top”和“bottom”，如果我們相對定位一個物件，那麼它將填充該特定側的所有間隙。JavaScript 語言的 float 屬性可用於使用 CSS 設定物件的屬性，並且可以透過 DOM 或 JavaScript 基本地給出相對於使用 CSS 定位的物件的相對位置。

語法

我們已經瞭解瞭如何返回元素相對於浮動物件的定位的基本知識。讓我們看看它的語法 -

document.getElementById( Id_of_required_element ).style.clear = relative_position;
document.write(document.getElementById( Id_of_required_element ).style.clear);

在上述語法中，首先，我們使用“document.getElementById”方法獲取了所需的元素。之後，使用“style”的“clear”屬性，我們設定了相對定位，可以是“left”、“right”、“top”和“bottom”。在下一步中，使用相同的屬性，我們獲取在先前步驟中定義的相對浮動位置，並使用 document.write屬性將其返回或列印到文件中。

演算法

我們已經瞭解了在 JavaScript 中返回元素相對於浮動物件的定位的基本語法。現在，讓我們轉到完整的演算法並定義一些基本步驟來說明如何準確地執行它 -

建立 HTML 程式碼的主體

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

  • 其次，我們將建立另一個元素，並且不會為其定義任何固定位置。

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

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

宣告樣式

在頭部或使用內聯程式碼，我們將向第一個元素新增一些樣式以定義其相對位置。

宣告指令碼

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

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

  • 使用 document.getElementId()方法，我們將獲取第二個元素，並透過使用“style”屬性的“clear”方法來設定相對位置。

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

示例

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

<!DOCTYPE html>
<html>
<head>
   <style>
      img {
         float: left;
      }
   </style>
</head>
   <body>
   <img src = "https://tutorialspoint.tw/videotutorials/images/tutor_connect_home.jpg" width = "170" height = "150">
   <p id = "myP" >
      Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! 
      Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! 
      Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! Demo content! 
      Demo content! Demo content! Demo content! Demo content! Demo content! Demo content!
   </p>
   <button type = "button" onclick = "display()" >Click Me!! </button>
   <script>
      function display() {
         document.getElementById("myP").style.clear = "left";
         document.write(document.getElementById("myP").style.clear);
      }
   </script>
</body>
</html>

在上面的程式碼中，我們透過提供源來定義了一個影像，一個帶有 id“myP”的段落，並添加了一些隨機句子以顯示演示。在主體末尾，我們使用 button 標籤建立了一個按鈕，併為其定義了一個 onclick 事件，該事件將呼叫 display 函式。在 style 標籤中，我們為定義的影像提供了 float 位置。

在 script 標籤中，我們定義了 display 函式，該函式將使用 DOM 透過 document.getElementById 方法獲取所需的元素，並透過使用 style 屬性的 clear 方法來定義和返回所需的相對位置。

注意 - 樣式是在此處為第一個元素（即影像）使用 CSS 定義的相同屬性，以及在 JavaScript 中為段落使用的相同屬性。

結論

在本教程中，我們學習瞭如何在 JavaScript 中返回元素相對於浮動物件的定位。要設定相對定位或獲取或返回相對定位，我們使用了 JavaScript 的“clear”屬性，該屬性定義在物件的 style 屬性下。首先使用 DOM 獲取元素，然後使用 clear 屬性更改相對位置。

更新於：2022-11-07

389 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.