如何在 JavaScript 中返回元素相对于浮动对象的位置?
本教程教我们如何在 JavaScript 中返回元素相对于浮动对象的位置。要设置相对位置或获取或返回相对位置，我们将使用 JavaScript 的"clear"属性，该属性在对象的 style 属性下定义。
总共有四个相对位置，分别是"left"、"right"、"top"和"bottom"，如果我们相对定位一个对象，那么它将填充该特定侧的所有间隙。JavaScript 语言的 float 属性可用于使用 CSS 设置对象的属性，并且给出对象相对于使用 CSS 定位的对象的相对位置基本上可以通过 DOM 或 JavaScript 完成。
语法
我们已经了解了如何返回元素相对于浮动对象的位置的基础知识。让我们看看它的语法 -
document.getElementById( Id_of_required_element ).style.clear = relation_position; document.write(document.getElementById( Id_of_required_element ).style.clear);
在上述语法中，首先，我们使用'document.getElementById'方法获取所需元素。之后，使用'style'的'clear'属性，我们设置了相对位置，可以是'left'、'right'、'top'和'bottom'。在下一步中，使用相同的属性，我们得到在上一步中定义的相对浮动位置，并使用document.write属性返回或在文档中打印。
算法
我们已经看到了在 JavaScript 中返回元素相对于浮动对象的位置的基本语法。现在，让我们转到完整的算法并定义一些基本步骤来具体说明如何执行 -
创建 HTML 代码的主体
首先，我们将定义一个元素并通过定义其样式将其固定在一侧。
其次，我们将创建另一个元素，并且不会为其定义任何固定位置。
最后，我们将使用按钮标签创建按钮并定义一个 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://www.tutorialspoint.com/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"的段落，并添加了一些随机句子来展示演示。在最后的主体中，我们使用按钮标签创建了一个按钮，并为其定义了一个 onclick 事件，该事件将调用显示函数。在 style 标签中，我们为定义的图像赋予了浮动位置。
在 script 标签中，我们定义了显示函数，该函数将使用 DOM 通过 document.getElementById 方法获取所需元素，并使用 style 属性的 clear 方法定义并返回所需的相对位置。
注意 − Style 与使用 CSS 为第一个元素(此处为图像)定义的属性相同，并且与使用 JavaScript 为段落定义的属性相同。
结论
在本教程中，我们学习了如何在 JavaScript 中返回元素相对于浮动对象的位置。为了设置相对位置或获取或返回相对位置，我们使用了 JavaScript 的"clear"属性，该属性在对象的 style 属性下定义。首先使用 DOM，我们获取元素，然后通过使用 clear 属性更改相对位置。
