
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to return the position of the element relative to floating objects in JavaScript?
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.
- Related Articles
- How to return the position of a document relative to the collection in MongoDB?
- How to set div position relative to another div in JavaScript?
- How to set the top position of an element with JavaScript?
- How to return true if the parent element contains the child element in JavaScript?
- How to set the right position of a positioned element with JavaScript?
- How to set the bottom position of a positioned element with JavaScript?
- How to set the left position of a positioned element with JavaScript?
- How to return the background color of an element with JavaScript DOM?
- Python Tkinter – How to position a topLevel() widget relative to the root window?
- How to find the coordinates of the cursor relative to the screen with JavaScript?
- How to set the length of the item relative to the rest with JavaScript?
- How to set position relative to top of a canvas circle using Fabric.js?
- Constructing an array of addition/subtractions relative to first array element in JavaScript
- How to set cursor position in content-editable element using JavaScript?
- CSS position: relative;
