How to return the position of the element relative to floating objects in JavaScript?

Javascript Web Development Front End Technology

This tutorial teaches us how to return the position of the element relative to floating objects in JavaScript. To set the relative position or to get or return the relative position we are going to use the ‘clear’ property of JavaScript which is defined under the style property of an object.

There are a total of four relative positions that are ‘left’, ‘right’, ‘top’, and ‘bottom’, and if we relatively position an object then it will fill all the gaps of that particular side. The float property of the JavaScript language can be used to set the property of the object using CSS and to give a relative position of an object with respect to objects positioned using CSS can be done by DOM or JavaScript basically.

Syntax

We have seen the basics of how to return the position of the element relative to floating objects. Let’s see the syntax of it −

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

In the above syntax, first, we have got the required element using the ‘document.getElementById’ method. After that using the ‘clear’ property of ‘style’ we have set the relative position which could be ‘left’, ‘right’, ‘top’, and ‘bottom’. In the next step, using the same property we get the relative floating position that we have defined in the previous step and returned or printed in the document using the document.write property.

Algorithm

We have seen the basic syntax to return the position of the element relative to floating objects in JavaScript. Now, let's move to the complete algorithm and define some basic steps to how exactly do it −

Creating the body of the HTML Code

First, we will define an element and fix it on one side by defining the style for it.
Secondly, we will create another element and will not define any fixed position for it.
At last, we will create the button using the button tag and define an onclick event by which it will call the display() function.
Display() is defined in the script and all main part to print the required return value is present.

Declaring the Style

In the head or using inline code we will add some style to the first element to define its relative position to it.

Declaring the Script

In the script, we will create the display() function using the function keyword.
Display() function will contain the code to set the value of the second element by getting it using the DOM.
Using the document.getElementId() method we will get the second element and by using the ‘clear’ method of the ‘style’ property we will set the relative position.
In the end, by using the document.write() method we will return the final required value.

Example

In the above steps, we have seen the complete algorithm for the required operation, now let's see a complete code for the implementation of the algorithm for better understanding −


<!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>

In the above code, we have defined an image by providing the source, a paragraph with the id ‘myP’, and added some random sentences to show the demo. In the body at the end, we have created a button using the button tag and defined an onclick event for it which will call the display function. In the style tag, we have given the float position to the defined image.

In the script tag, we have defined the display function which will use the DOM to get the required element by document.getElementById method and defined and returned the required relative position by using the clear method of style property.

Note − Style is the same property that is defined using CSS for the first element which is the image here and the same using JavaScript for paragraph.

Conclusion

In this tutorial, we have learned, how to return the position of the element relative to floating objects in JavaScript. To set the relative position or to get or return the relative position we have used the ‘clear’ property of JavaScript which is defined under the style property of an object. First using the DOM, we got the element then by using clear property we changed the relative position.