In my last post, I touched on the ability to programmatically change styles in a web application. In today’s post, I want to visit another style property which the DOM exposes that comes in very handy. This property is visibility.
Many times in a web application you want to either hide or show content based upon the user and the experience you wish them to have. We can do this by accessing the visibility property. Let’s see how this works.
In CSS you can set an element to be either hidden or visible as follows:
[code lang=”css”]
#myElement {
visibility: hidden;
}
[/code]
If you would like the ‘myElement’ element to be seen, you would change “hidden” to “visible”. Now how do we access this programmatically?
[code lang=”js”]
document.getElementById("myElement").style.visibility = "hidden";
[/code]
As you can see, as long as we grab the element first, we then can access the style visibility property and set it to either visible or hidden.
Happy Coding!
Clay Hess
