How to make div show and hide with javascript

With the continuous development of Internet technology, JavaScript has become one of the essential skills for modern website development. One of the commonly used functions is to display and hide div elements, which is very important in website design and interaction. This article will explain in detail how to use JavaScript to display and hide div elements.

1. Basic structure of HTML

Before we start writing JavaScript code, we need to write the basic structure of HTML first. In this example, we created a button and a div element:

<button onclick="toggle()">点击显示/隐藏</button>

<div id="myDiv">这是一个隐藏的区域。</div>

The button calls the toggle() function, and the div element contains the id attribute "myDiv". This id attribute is used to operate this element. necessary conditions.

2. Use JavaScript to display and hide div elements

1. Use the style.display attribute

First, we can use JavaScript’s style.display Properties to control the display and hiding of elements. This attribute accepts three parameters: "block" is used to display the element, "none" is used to hide the element, and "inline-block" is used to display the inline block element.

We can use it with element.style.display, for example:

<script>
function toggle()
{
    var div = document.getElementById("myDiv");
    if (div.style.display === "none") {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}
</script>

In this script, the div element is first obtained through the getElementById() method, and then its style is checked. Whether the display attribute is "none". If it is, change its value to "block" to show the element, otherwise change its value to "none" to hide the element.

2. Using the className attribute

Using a different method than style.display, you can also use JavaScript's className attribute to toggle the display and hiding of div elements. This method is implemented using CSS to define styles.

For example, we can define two classes: ".show" and ".hide". ".show" is used to show div elements, and ".hide" is used to hide div elements. We also need to specify the default classname for the element:

<style>
.hide { visibility: hidden; }
.show { visibility: visible !important; }
</style>

<div id="myDiv" class="hide">这是一个隐藏的区域。</div>

Since the CSS style is just a string, you can use JavaScript's className attribute to modify the element's class:

<script>
function toggle()
{
    var div = document.getElementById("myDiv");
    if (div.className === "hide") {
        div.className = "show";
    } else {
        div.className = "hide";
    }
}
</script>

This script switches the div element When adding a class, a "!" symbol is added before the "show" class to ensure that the "visibility" style is forced to appear, which can override the "hide" class style to make the div element visible.

3. Conclusion

The above are two methods of using JavaScript to display and hide div elements. Although they use different properties and methods, they all easily achieve the same purpose: toggling the visibility of a div element. In an actual project, you can choose the methods and properties that best suit you based on the specific functionality you need.

The above is the detailed content of How to make div show and hide with javascript. For more information, please follow other related articles on the PHP Chinese website!