Document getelementbyid style display none in javascript

Technical Details

More Examples

Example

Difference between the display property and the visibility property:

function demoDisplay() <
document.getElementById(«myP1»).style.display = «none»;
>

function demoVisibility() document.getElementById(«myP2»).style.visibility = «hidden»;
>

Example

Toggle between hiding and showing an element:

function myFunction() <
var x = document.getElementById(‘myDIV’);
if (x.style.display === ‘none’) <
x.style.display = ‘block’;
> else <
x.style.display = ‘none’;
>
>

Example

Difference between «inline», «block» and «none»:

function myFunction(x) <
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById(«mySpan»);
elem.style.display = sel;
>

Example

Return the display type of a

element:

Источник

Document getelementbyid style display none in javascript

Last updated: Jan 11, 2023
Reading time · 4 min

# Table of Contents

# Hide an Element by ID using JavaScript

To hide an element by id, select the element using the getElementById() method and set the element’s style.display property to none .

Setting the element’s display property to none removes the element from the DOM, as if the element never existed on the page.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="box">Boxdiv> button id="btn">Hide Boxbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const box = document.getElementById('box'); // 👇️ removes element from DOM box.style.display = 'none'; // 👇️ hides element (still takes up space on page) // box.style.visibility = 'hidden'; >); 

We added an event listener to a button element that hides a div on click.

We used the document.getElementById method to get the element with id of box .

Note that we used the display CSS property in the example, however, you might need the visibility property depending on your use case.

When an element’s display property is set to none , the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element’s visibility property is set to hidden , it still takes up space on the page, however, the element is invisible (not drawn). It still affects the layout of your page as normal.

If you click on the button element from the example, the div element is removed from the DOM and the button element takes its place.

Here is an example that uses the visibility property to hide an element by its id .

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const box = document.getElementById('box'); // 👇️ hides element (still takes up space on the page) box.style.visibility = 'hidden'; >); 

When the button is clicked, the div becomes invisible, however, it still takes up space on the page.

On the other hand, if the element’s display property is set to none , it no longer takes space on the page and often other elements shift and take its place.

# Hide/Show an Element by ID using JavaScript

To show/hide an element by id:

1. Access the style.display property on the element.
2. If the value of the display property is set to none , set it to block .
3. Otherwise, set the value to none .

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div id="box" style="background-color: salmon; width: 100px; height: 100px"> Box 1 div> button id="btn">Hide divbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const box = document.getElementById('box'); const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick()  if (box.style.display === 'none')  box.style.display = 'block'; btn.textContent = 'Hide div'; > else  box.style.display = 'none'; btn.textContent = 'Show div'; > >); 

We selected the div by its id using the document.getElementById method.

Then, we added a click event listener to the button. Every time the button is clicked, the handleClick() function is invoked.

In the function, we check if the button’s display CSS property has a value of none .

If the element has a display value set to none , then it is hidden, in which case, we set its display value to block to show the element.

Otherwise, the div is shown, in which case we set its display value to none to hide it.

We also used the textContent property, to update the button’s text when the div is hidden/shown.

# Show/Hide an element by ID using visibility property

We used the display property in the examples, however, you might need to use the visibility property depending on your use case.

When an element’s display property is set to none , the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element’s visibility property is set to hidden , it still takes up space on the page, however, the element is invisible (not drawn).

The element still affects the layout on your page as normal.

Here is an example that uses the visibility property to show/hide a div element by its id.

Copied! 
const box = document.getElementById('box'); const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick()  if (box.style.visibility === 'hidden')  box.style.visibility = 'visible'; btn.textContent = 'Hide div'; > else  box.style.visibility = 'hidden'; btn.textContent = 'Show div'; > >); 

If you click on the button element, you will see that the div is hidden, however, the button doesn’t take its place on the page.

Even though the div element is not rendered, it still affects the layout on the page as normal.

When we used the display property to hide the div element, the button would take its place in the DOM as the div element got completely removed from the document.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник