Sometimes, we want to make a div visible or invisible with JavaScript.
In this article, we’ll look at how to make a div visible or invisible with JavaScript.
Make a Div Visible and Invisible with JavaScript with the visibility Property
One way to make a div visible or invisible is with the visibility
property.
For instance, if we have a div:
<div>
hello world
</div>
Then we can make it visible with:
const div = document.querySelector('div')
div.style.visibility = 'visible'
And we can make it invisible with:
const div = document.querySelector('div')
div.style.visibility = 'hidden'
Make a Div Visible and Invisible with JavaScript with the display Property
Another way to make a div visible or invisible is with the display
property.
For instance, if we have a div:
<div>
hello world
</div>
Then we can make it visible with:
const div = document.querySelector('div')
div.style.display = 'inline';
to make the div display inline with other elements.
And we can write:
const div = document.querySelector('div')
div.style.display = 'block';
to make it display in its own row.
And we can make it invisible with:
const div = document.querySelector('div')
div.style.display = 'none';
Conclusion
One way to make a div visible or invisible is with the visibility
property.
Another way to make a div visible or invisible is with the display
property.