How to show and hide css divs

CSS is a language used for web page styling, which can be used to change the appearance and layout of the page. In CSS, the div element can be used to group web content and apply different styles to these components. Among them, the display and hiding of div elements is very useful in the design of the page.

In this article, we will discuss how to use CSS div elements to show and hide page elements. This article will cover the following content:

1. What is the CSS div element
2. CSS display property
3. CSS visibility property
4. How to use CSS div Element to show and hide page elements

1. What is the CSS div element

In HTML, the div element is a block-level element with no semantics. It can be used to group web content, and the appearance and layout of these components can be modified through CSS styles.

For example, suppose we have three different content elements on the web page. The HTML code of these elements is as follows:

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

In the above code, we use three div elements to Group header, body and footer content. Next, we can modify the style of each div element through CSS styles, such as setting the background color, text font, border, etc.

2. CSS display attribute

In CSS, the display attribute can be used to control the display mode of an element. Its values ​​include the following:

• none: The element will not be displayed and will not occupy page space.
• block: The element will be displayed as a block-level element, occupying its own line.
• inline: The element will be displayed as an inline element, displayed on the same line as other inline elements.
• inline-block: The element will be displayed as an inline block element and displayed in the same line as other inline elements, but attributes such as width and height can be set.

The following is an example that shows how to use the CSS display property to hide a page element.

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

In the above code, we use a div element with class box and set its display attribute to none. This means that this div element will not be displayed on the page.

3. CSS visibility attribute

The CSS visibility attribute can also be used to control the display and hiding of an element. Unlike the display attribute, the visibility attribute only controls whether the element is visible, but does not affect the layout of the element on the page. Optional values ​​for the visibility attribute include:

• visible: The element is visible, which is the same as the default value of the display attribute.
• hidden: The element is invisible but still occupies page space.
• collapse: used for table elements. When set to collapse, the element will be invisible and the cell border will disappear.

The following is an example showing how to use the CSS visibility property to hide a page element.

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

In the above code, we use a div element with class box and set its visibility attribute to hidden. This means that the div element will not be displayed on the page, but it will still occupy page space.

4. How to use CSS div elements to show and hide page elements

We have introduced the CSS display and visibility properties above. Next, we will combine these properties to implement a click button on the page. , the function of showing or hiding a div element.

The HTML code is as follows:

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

In the above code, we create a button element and add an onclick event to it. We also create a div element with class box, which is the element we want to hide or show.

Next, we add the following code to the CSS file:

.box {
  visibility: hidden;
}

This will make the box element invisible when the page just loads.

Finally, we add the following code to the JavaScript code of the page:

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

In the above code, we define a function named toggle() and bind it to On the button's onclick event. Inside the function, we use the document.querySelector() method to get the element with class box and check whether its display attribute is none. If it is, we set its display property to the empty string, thereby displaying the box element; otherwise, we set its display property to none, thus hiding the box element.

The above is how to use CSS div elements to display and hide page elements. By mastering these techniques, we can make our pages more dynamic and interactive.

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