資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 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()在指令碼中定義，所有列印所需返回值的主要部分都在其中。
宣告樣式
在 head 中或使用內聯程式碼，我們將向第一個元素新增一些樣式以定義其相對位置。
宣告指令碼
在指令碼中，我們將使用 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 屬性更改相對位置。
389 次瀏覽
