How to change div position dynamically using JavaScript?
In this article, you are going to learn how to change the position of a <div> dynamically using JavaScript.
We will explore two different methods to achieve this task: using the style property and manipulating the CSS classes. Both methods have their use cases and can be handy depending on your specific requirements.
Method 1: Using the style Property #
One way to change the position of a <div> element dynamically is by directly modifying its style property.
Explanation of the above example:
- We start with an HTML structure that includes a <div> element and a button.
- The <style> section defines the default style for the <div> element, setting its position to relative with a blue background.
- The JavaScript function changePosition() is called when the button is clicked.
- Inside the function, we get a reference to the <div> element using getElementById() method, and then we change its position to an absolute value, moving it 100 pixels down and 200 pixels to the right.
Method 2: Manipulating CSS Classes #
Another approach is to manipulate CSS classes to change the position dynamically.
Explanation:
- We again start by obtaining a reference to the <div> element.
- Instead of directly modifying the style properties, we add a CSS class positioned-div to the element.
- This CSS class contains the desired positioning styles, such as setting position: absolute, top, and left, in your stylesheet.
Conclusion: #
In this blog post, we've explored two methods to change the position of a <div> dynamically using JavaScript.
The first method directly modifies the style properties, while the second method involves adding or removing CSS classes with the desired positioning styles.
The choice between these methods depends on your project's requirements and coding style preferences. Now you have the knowledge to move elements around the page with ease based on your needs.
You don't need any if condition ! <script>
const myDiv = document.getElementById('myDiv');
const moveButton = document.getElementById('moveButton');
moveButton.addEventListener('click', () =>{
myDiv.classList.toggle('positioned-div')
});
</script>