css show and hide

CSS Show and Hide

CSS (Cascading Style Sheets) is a style sheet language used to describe the style and layout of web pages. In web development, CSS show and hide functions are very important, which can be achieved by controlling the visibility of HTML elements. This article will introduce the implementation method and application of CSS display and hiding.

1. Basic syntax

In CSS, the visibility of an element is controlled by setting its display attribute. The values ​​of the display attribute are as follows:

1. none: Hides the element and does not reserve space.
2. block: The element is displayed as a block-level element and occupies the entire line of space.
3. inline: The element is displayed as an inline element and takes up inline space.
4. inline-block: The element is displayed as an inline block-level element, occupying inline space but the width and height can be set.
5. table: The element is displayed as a table. At this time, the display attribute of the element will be set to table-cell, and table-cell will occupy the space of the table.
6. table-row: The element is displayed as a table row. At this time, the display attribute of the element will be set to table-cell, and table-cell occupies the space of the table.
7. table-cell: The element is displayed as a table cell and takes up the space of the table.

2. Implementation method

1. Initial hiding

The simplest implementation method is to set the display attribute of the element to none in CSS. For example, in the following code, the initial state of the div element is hidden:

div{
  display:none;
}

2. Click to display

Through JavaScript, you can display or hide a button when you click it element. First, define a button in HTML:

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

An onclick event is defined here. When the button is clicked, the toggle() function will be executed. Secondly, in CSS, set the display attribute of the element to none, as shown below:

#box{
  display:none;
}

Finally, in JavaScript, define the toggle() function to display or hide by changing the display attribute of the element:

function toggle(){
  var box = document.getElementById("box");
  if(box.style.display == "none"){
    box.style.display= "block";
  }
  else{
    box.style.display= "none";
  }
}

3. Display when the mouse rolls over

Similarly, you can use JavaScript to display or hide an element when the mouse rolls over. In HTML, define an element:

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

The onmouseover and onmouseout events are defined here, which represent the operations of the mouse sliding over and leaving respectively. Secondly, in CSS, set the display attribute of the element to none, as shown below:

#box{
  display:none;
}

Finally, in JavaScript, define the show() and hide() functions:

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

function hide(){
  var box = document.getElementById("box");
  box.style.display= "none";
}

3. Application example

1. Pop-up box

You can display and hide the pop-up box through the display attribute of CSS. In HTML, define a button and a pop-up window:

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

Next, in CSS, set the display attribute of the pop-up window to none, as shown below:

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

The pop-up window is set here The width, height, position, background color and other styles. Finally, in JavaScript, define the show() and hide() functions to control the display and hiding of the pop-up window respectively:

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

function hide(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "none";
}

2. Picture carousel

Through CSS The display attribute can realize the switching effect of image carousel. In HTML, define an image container and multiple images:

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

Next, in CSS, set the style of the image container, as shown below:

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

Here the width of the image container is set , height, overflow hiding, and the position and display properties of the image. Finally, in JavaScript, the effect of image carousel is achieved:

var imgs = document.querySelectorAll("#slider img");
var index = 0;

setInterval(function(){
  imgs[index].style.display = "none";
  index = (index + 1) % imgs.length;
  imgs[index].style.display = "block";
}, 2000);

The setInterval function is used here to switch an image every 2 seconds. The specific implementation method is to first set the display attribute of the current image to none, then calculate the index value of the next image, and finally set the display attribute of the image to block.

4. Summary

The implementation method of CSS display and hide functions is very simple, but it is a basic skill in Web development. In actual development, various effects can be achieved through the display attribute of CSS, such as pop-up windows, image carousels, etc. At the same time, through the cooperation of JavaScript, richer interactive effects can be achieved.

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