Page 1 of 1

Methods to hide and reveal HTML elements, which is better?

Posted: Mon Oct 08, 2007 2:45 pm
by califdon
I have sometimes used Javascript to assign an object's .innerHTML to either a null string or something else, and I have sometimes used the object's .style.display to be either "hidden" or "block". Does anyone have guidelines as to why one should be used in various circumstances?

Posted: Mon Oct 08, 2007 3:49 pm
by s.dot
I'd use the style to hide/display. And I'd use javascript to hide the element, that way users without javascript enabled will still be able to view all of the content.

Posted: Mon Oct 08, 2007 3:51 pm
by VladSun
if the contents of the element are constant I'll always use display property. I would use innerHTML only in cases where I need to change it, not to delete it in order to hide something.

Posted: Mon Oct 08, 2007 5:24 pm
by califdon
Thanks to both of you. Good points.

Posted: Tue Oct 09, 2007 4:18 pm
by Kieran Huggins
Use CSS for sure - it's way faster and more reliable, IIRC.

display: none|block|inline; will remove the element entirely from the layout (block|inline depends on the element type, i.e. Block Elements like Divs or inline elements like Spans)

visibility: hidden|visible will make the element in/visible, but it remains "laid out" - which essentially means there will be a hole where the element used to be.

Posted: Tue Oct 09, 2007 7:24 pm
by califdon
Oh, right! Visibility! As you said, that won't disturb surrounding elements. Excellent. Thanks, Kieran!