Show element with javascript

How to display HTML element with JavaScript?

In this tutorial, we will learn how to display an HTML element using JavaScript.

HTML elements are the components that make up an HTML format file. These components are in charge of constructing web pages and defining their content. In HTML, an element typically consists of a start tag (tag name), a closing tag (tag name), and any text that is added in between. A collection of end tags, start tags, content, and attributes is what constitutes an element technically.

In some cases, the HTML elements

.

and

.

are both present. Some HTML elements, such the , < hr/>, and
elements, do not need closing. They are referred to as void elements.

Furthermore, we have different methods to achieve our goal in this tutorial.

Using the visibility Property

An element’s visibility can be set or returned using the visibility attribute.

An element may be displayed or hidden by the creator using the visibility attribute. It resembles the show property in many ways. The distinction is that whereas visibility:hidden makes the contents of the element invisible while maintaining the element’s original location and size, display:none completely conceals the element.

Syntax

Following is the syntax for using the visibility property −

document.getElementById("div").style.visibility = "visible";

Example

In this example, we see that a paragraph div has been created that contains text which gets hidden when the Hide button is clicked. The same text is displayed when Show button is clicked. The visibility property helps to change the visibility of the HTML element. It controls whether the element will be shown or hidden from the visitor.

html> body> p id="div">Click on Hide to remove text & Click on Show to display text/p> button type="button" onclick="displayHide()"> Hide /button> button type="button" onclick="displayShow()"> Show /button> script> function displayHide()  document.getElementById("div").style.visibility = "hidden"; > function displayShow()  document.getElementById("div").style.visibility = "visible"; > /script> /body> /html> 
 

In the above output, the users can see that on clicking show, the text is visible on the user’s screen. On clicking the Hide button, we see the text is being hidden from the user’s visibility.

Using the display Property

The display type of an element can be set or returned using the Style display attribute in the HTML DOM. Comparable to the visibility attribute, which shows or hides an element, it is similar. While visibility: hidden means that just the contents of the element will be concealed, the element will still be in its original location and size, display: none means that the element will be completely hidden.

Syntax

Following is the syntax for the display property −

It returns the display property −

It sets the display property −

object.style.display = value;

Example

In this example, we can see a div element #myDIV has been created. On clicking the Show button this div element is shown to the user. On clicking the Hide button this div element is being hidden from the user’s visibility. The display element controls whether the #myDIV element will be shown or hidden from the user’s visibility.

html> head> style> #myDIV  width: 100px; height: 100px; background-color: lightblue; > /style> /head> body> p>Click the "Show" button to display the div element/p> p>Click the "Hide" button to remove the div element/p> button onclick="myFunction()">Show/button> button onclick="myFunction1()">Hide/button> div id="myDIV"> This is my DIV element. /div> script> function myFunction()  document.getElementById("myDIV").style.display = " block"; > function myFunction1()  document.getElementById("myDIV").style.display = "none"; > /script> /body> /html> 
 

In this output, we can see that on clicking the Show button the div element is visible and on clicking the Hide button the div element gets hidden.

Using the hidden Property

A boolean value makes up the hidden attribute. It indicates that an element is either not important yet or is no longer relevant when it is present. Elements that have the hidden attribute defined shouldn’t be shown by browsers.

Another application of the hidden property is to prevent a user from viewing an element until a different requirement has been satisfied (like selecting a checkbox, etc.). The element might then be made visible by removing the hidden property using JavaScript.

Syntax

Below is the syntax for using the Hidden property on JavaScript −

document.getElementById("div_element").hidden = true;

Example

In this example, the div element contains an id and a class which contains some text. On clicking the OK button, we can display the hidden text. The hidden attribute helps to show some hidden text when a Boolean value of true is given to it. When a Boolean value of false is given to it, it will hide the previous text.

html> head> /head> body> div id="welcome" class="panel"> h3>Using Hidden Property/h3> p>Click on the OK button to Display A message/p> button class="button" id="okButton">OK/button> /div> div id="awesome" class="panel" hidden> h3>Have a great day with your loved ones!/h3> /div> script> document.getElementById("okButton") .addEventListener("click", function()  document.getElementById("welcome").hidden = true; document.getElementById("awesome").hidden = false; >, false); /script> /body> /html> 
 

In this output, the user can see that the message is being displayed on the user’s screen after clicking the button.

Источник

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.

Источник

How to Show or Hide an Element on Website using JavaScript

Throughout web development, users need to hide or show some elements. These elements can be a button, some animation, or a navigation bar etc. Most of the time the user wants a button or a navigation bar to be visible for the desktop viewpoint but not for the mobile viewpoint.

With JavaScript, users can easily hide or show an element on the webpage, depending on the behavior of the user. In this article we’ll see how JavaScript is used for this purpose.

Hiding and Displaying elements in JavaScript

Using JavaScript, we can hide or show an element on the webpage using:

Let’s understand each of them separately with examples and then compare how the differ from each other:

How to use style.display in JavaScript: The display property represents an element that should be displayed on your web page.. Using this user can hide the entire element, and the page is built as the previous element wasn’t there at all.

Syntax:

Here in commas, a value should be defined for whether to display the content or not. Here’s an example:

To Hide element: style.display = “none”:

As the user clicks on the button, the function is called to hide the element. This is done by assigning none value to style.display.

Now look at the output, how the button occupied the space of the image. This is how display works, it hides the element entirely and rebuilds the page as if the element wasn’t there in the first place.

To Show an element: style.display = “” or “block”:

document.getElementById ( «div2″ ) . style .display = » ;
}
< / script >
< / body >

Now similarly, in order to show the element the button moved and provided space to the element when display was changed from style.display =”none” to style.display = “”.

Through these ways, the element will be displayed or completely hidden and not just its visibility. The page will be rebuilt according to these behaviours.

How to use style.visibility in JavaScript : The style visibility works in the similar way, but the difference is that only the visibility of the element is hidden from the screen reader. This means that the element is not removed from the page flow, hence leaving space for it on the page.

Syntax:

Here in commas, a value of “hidden” or “” no value should be defined for whether to display the content or not. To better understand this here’s an example:

Hide content of paragraph < / button >

This is another paragraph. < / p >

function myFunction() document.getElementById(«div»).style.visibility = «hidden»;
>
< / script >

Now, here when the button was clicked ato hide the visibility, it only hid it for the viewer’s eye.

In this, the space on the web page was not occupied by the element. This shows how style.display and style.visibility differ.

Conclusion

Everyone wants to hide or show some particular elements on their web page. In this how to guide, we learned ways to change the visibility of elements on the web page using JavaScript. There are two specific ways, but they differ from each other slightly. Using style.display the content gets hidden and its space is occupied by the other content. Whereas, using style.visibility, the content only is hidden for the reader, but it’s still there as its space can not be occupied by other elements. This is extremely useful for web developers, as developers want some content to be hidden and some to be displayed according to the viewpoint.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

Источник