- How to hide and show DOM elements using JavaScript
- You might also like.
- Style display Property
- Browser Support
- Syntax
- Property Values
- Technical Details
- More Examples
- Example
- Example
- Example
- Example
- Скрыть / показать элементы JavaScript
- Используйте свойство style.visibility , чтобы скрыть / показать элементы HTML
- Используйте свойство style.display , чтобы скрыть / показать элементы HTML
- Используйте jQuery hide() / show() , чтобы скрыть / показать элементы HTML
- Используйте jQuery toggle() , чтобы скрыть / показать элементы HTML
- Используйте addClass() / removeClass() , чтобы скрыть / показать элементы HTML
- Сопутствующая статья — JavaScript DOM
- .hidden
- Кратко
- Как пишется
- Как понять
How to hide and show DOM elements using JavaScript
There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.
The style display property is used to set and get the element’s display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides. To hide an element, set the display property to none :
document.querySelector('.btn').style.display = 'none' document.querySelector('.btn').style.display = 'block' Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none , it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size. To hide an element, set the visibility property to hidden :
document.querySelector('.btn').style.visibility = 'hidden' document.querySelector('.btn').style.visibility = 'visible' The style visibility property only hides the element but doesn’t remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.
jQuery provides hide() , show() , and toggle() utility methods that use inline styles to update the display property of the element. Let us use the style property to create the above jQuery methods in vanilla JavaScript:
// hide an element const hide = elem => elem.style.display = 'none' > // show an element const show = elem => elem.style.display = 'block' > // toggle the element visibility const toggle = elem => // if the element is visible, hide it if (window.getComputedStyle(elem).display !== 'none') hide(elem) return > // show the element show(elem) > // hide element hide(document.querySelector('.btn')) // show element show(document.querySelector('.btn')) // toggle visibility toggle(document.querySelector('.btn')) Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible. We used this method because the style property only deals with inline styles specified using the element’s style attribute. But the HTML element could be hidden through an embedded element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined. Another thing to notice is the getComputedStyle(elem).display !== ‘none’ statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex , inline-block , grid , table , etc., for the display property to show an element. However, to hide an element, there is only one value, display: none . If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
You might also like.
Style display Property
The display property sets or returns the element’s display type.
Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.
The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
Tip: If an element is a block element, its display type can also be changed with the float property.
Browser Support
Syntax
Return the display property:
Property Values
| Value | Description | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Element is rendered as a block-level element | ||||||||||||||||||||||||||||||||||||||
| compact | Element is rendered as a block-level or inline element. Depends on context | ||||||||||||||||||||||||||||||||||||||
| flex | Element is rendered as a block-level flex box. New in CSS3 | ||||||||||||||||||||||||||||||||||||||
| inline | Element is rendered as an inline element. This is default | ||||||||||||||||||||||||||||||||||||||
| inline-block | Element is rendered as a block box inside an inline box | ||||||||||||||||||||||||||||||||||||||
| inline-flex | Element is rendered as a inline-level flex box. New in CSS3 | ||||||||||||||||||||||||||||||||||||||
| inline-table | Element is rendered as an inline table (like
|
