如何在 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.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”的段落，并添加了一些随机句子以显示演示。在主体末尾，我们使用 button 标签创建了一个按钮，并为其定义了一个 onclick 事件，该事件将调用 display 函数。在 style 标签中，我们为定义的图像提供了 float 位置。

在 script 标签中，我们定义了 display 函数，该函数将使用 DOM 通过 document.getElementById 方法获取所需的元素，并通过使用 style 属性的 clear 方法来定义和返回所需的相对位置。

注意 - 样式是在此处为第一个元素（即图像）使用 CSS 定义的相同属性，以及在 JavaScript 中为段落使用的相同属性。

结论

在本教程中，我们学习了如何在 JavaScript 中返回元素相对于浮动对象的定位。要设置相对定位或获取或返回相对定位，我们使用了 JavaScript 的“clear”属性，该属性定义在对象的 style 属性下。首先使用 DOM 获取元素，然后使用 clear 属性更改相对位置。

更新于：2022-11-07

389 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告