Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
The CSS clear property controls how an element behaves next to floating elements. It can have values like 'left', 'right', 'both', or 'none'. When an element has the clear property set, it will move down to avoid overlapping with floated elements on the specified side.
Syntax
Here's how to set and get the clear property using JavaScript:
// Set the clear property document.getElementById(elementId).style.clear = "left|right|both|none"; // Get the clear property let clearValue = document.getElementById(elementId).style.clear;
The clear property accepts the following values:
- left: Element moves below left-floated elements
- right: Element moves below right-floated elements
- both: Element moves below all floated elements
- none: Element can be next to floated elements (default)
Example: Setting and Getting Clear Property
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin: 10px;
}
#myP {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<img src="/images/logo.png" width="170" height="150" alt="Sample Image">
<p id="myP">
This paragraph will be positioned relative to the floating image above.
Initially, it flows around the image. When we apply the clear property,
it will move below the floating element.
</p>
<button onclick="setClear()">Set Clear: Left</button>
<button onclick="getClear()">Get Clear Value</button>
<button onclick="resetClear()">Reset Clear</button>
<p id="result"></p>
<script>
function setClear() {
document.getElementById("myP").style.clear = "left";
document.getElementById("result").innerHTML = "Clear property set to 'left'";
}
function getClear() {
let clearValue = document.getElementById("myP").style.clear;
document.getElementById("result").innerHTML = "Current clear value: " + (clearValue || "none");
}
function resetClear() {
document.getElementById("myP").style.clear = "none";
document.getElementById("result").innerHTML = "Clear property reset to 'none'";
}
</script>
</body>
</html>
How It Works
When you click the buttons in the example above:
- Set Clear: Left - The paragraph will move below the left-floated image
- Get Clear Value - Displays the current clear property value
- Reset Clear - The paragraph returns to flowing around the image
Practical Use Cases
The clear property is commonly used for:
- Creating layout sections that don't overlap with floated elements
- Ensuring footers appear below all floated content
- Managing text flow around images and sidebars
- Creating clearfix solutions for containing floated elements
Important Notes
Setting the clear property via JavaScript only affects inline styles. If the element has CSS rules applied via stylesheets, you may need to use getComputedStyle() to get the actual computed value:
// Get computed clear value (including CSS rules) let computedClear = window.getComputedStyle(element).clear;
Conclusion
The clear property in JavaScript allows you to control how elements position themselves relative to floating objects. Use element.style.clear to set values and retrieve the current positioning behavior of elements in your layout.
548 Views
