div css show hide div-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

div css show hide div

王林

May 27, 2023 am 11:03 AM

CSS Tips: Display and hide DIV through the display attribute

As one of the commonly used elements in pages, DIV is widely used in layout, formatting and content segmentation. In actual development, we sometimes need to control the display and hiding of a DIV element through code. In this case, the display attribute of CSS can be used.

The role of the display attribute

The display attribute is a basic attribute in CSS used to control whether an element is displayed. It can be set to a variety of values to achieve different display and hiding effects. Specifically, the value of the display attribute is as follows:

none: Hiding the element is equivalent to completely removing the space of the element on the page. The element does not occupy any space and is not rendered.
block: Display the element as a block-level element, that is, the element will occupy an exclusive line and automatically wrap before and after the label. You can set styles such as width, height, margins and padding.
inline: Display the element as an inline element, that is, the element will not occupy an exclusive line and will automatically wrap at the end. Styles such as width, height, margins, and padding cannot be set.
inline-block: Display elements as inline block elements, which have the characteristics of block-level elements. You can also set multiple inline elements to be displayed on the same line.
table, table-row, table-cell, etc.: Display elements as table and its cell elements.

Realizing the display and hiding of DIV

Next, we will use several examples to demonstrate how to use the display attribute to display and hide DIV.

Click the button to display and hide DIV

In this example, we control the display and hiding of DIV through a button.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv" style="display:none;">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

CSS part:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript part:

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

In this example, we added in the button element of HTML An onclick event and defines a toggle function. This function will obtain the DIV element we need to control through the getElementById method, and then realize the display and hide effects by judging the display attribute value of the element.

When we click the button, the toggle function will determine whether the display attribute value of the current DIV element is none. If so, it will be set to block, that is, displayed; if not, it will be set to none. , that is, hidden.

Use the :hover selector to display and hide DIV

In this example, we control the display and hiding of DIV by hovering the mouse over the element.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <div id="myDiv">
        <p>鼠标悬停在这里，显示下面的DIV元素</p>
        <div id="myPopup">这是一个DIV元素</div>
    </div>
</body>
</html>

CSS part:

#myDiv {
    width: 200px;
    height: 80px;
    background-color: #eee;
    position: relative;
}
#myPopup {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
#myDiv:hover #myPopup {
    display: block;
}

In this example, we use: hover selector to display and hide DIV elements. When the mouse hovers over the myDiv element, the myPopup element will be displayed; when the mouse leaves the myDiv element, the myPopup element will be hidden. At this time, we only need to set the display attribute value of the myPopup element to none or block.

Use CSS3 transition animation to display and hide DIV

In this example, in order to make the display and hiding of DIV elements smoother and more natural, we use This is achieved using the transition animation effect of CSS3.

HTML part:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

CSS part:

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out;
}

JavaScript part:

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.opacity === "0") {
        div.style.display = "block";
        div.style.opacity = "1";
    } else {
        div.style.opacity = "0";
        setTimeout(function() {div.style.display = "none";}, 300);
    }
}

In this example, we define the myDiv element in CSS An all .3s ease-in-out transition effect, so that when we modify the display attribute value or opacity attribute value of the myDiv element, a smooth transition will be made according to this effect.

In JavaScript, we use the setTimeout function to delay the execution of a block of code to wait for the completion of the transition effect. When we click the button, the toggle function will determine whether the opacity attribute value of the current DIV element is 0. If so, it will be set to 1, and the display attribute value will be set to block, which is displayed; if not, it will be displayed. Set it to 0, then wait for the transition to complete, and finally set its display attribute value to none, that is, hide it.

Summary

Through the above three examples, we can see that the display attribute of CSS can easily realize the display and hiding effects of DIV elements, and during the implementation process, JavaScript and With the help of CSS3, the effect is richer and more natural. I hope this article can help everyone master the display attribute of CSS!

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is thedifference between class and id selector?May 12, 2025 am 12:13 AM

Classselectorsareversatileandreusable,whileidselectorsareuniqueandspecific.1)Useclassselectors(denotedby.)forstylingmultipleelementswithsharedcharacteristics.2)Useidselectors(denotedby#)forstylinguniqueelementsonapage.Classselectorsoffermoreflexibili

CSS IDs vs Classes: The real differencesMay 12, 2025 am 12:10 AM

IDsareuniqueidentifiersforsingleelements,whileclassesstylemultipleelements.1)UseIDsforuniqueelementsandJavaScripthooks.2)Useclassesforreusable,flexiblestylingacrossmultipleelements.

CSS: What if I use just classes?May 12, 2025 am 12:09 AM

Using a class-only selector can improve code reusability and maintainability, but requires managing class names and priorities. 1. Improve reusability and flexibility, 2. Combining multiple classes to create complex styles, 3. It may lead to lengthy class names and priorities, 4. The performance impact is small, 5. Follow best practices such as concise naming and usage conventions.

ID and Class Selectors in CSS: A Beginner's GuideMay 12, 2025 am 12:06 AM

ID and class selectors are used in CSS for unique and multi-element style settings respectively. 1. The ID selector (#) is suitable for a single element, such as a specific navigation menu. 2.Class selector (.) is used for multiple elements, such as unified button style. IDs should be used with caution, avoid excessive specificity, and prioritize class for improved style reusability and flexibility.

Understanding the HTML5 Specification: Key Objectives and BenefitsMay 12, 2025 am 12:06 AM

Key goals and advantages of HTML5 include: 1) Enhanced web semantic structure, 2) Improved multimedia support, and 3) Promoting cross-platform compatibility. These goals lead to better accessibility, richer user experience and more efficient development processes.

Goals of HTML5: A Developer's Guide to the Future of the WebMay 11, 2025 am 12:14 AM

The goal of HTML5 is to simplify the development process, improve user experience, and ensure the dynamic and accessible network. 1) Simplify the development of multimedia content by natively supporting audio and video elements; 2) Introduce semantic elements such as, etc. to improve content structure and SEO friendliness; 3) Enhance offline functions through application cache; 4) Use elements to improve page interactivity; 5) Optimize mobile compatibility and support responsive design; 6) Improve form functions and simplify verification process; 7) Provide performance optimization tools such as async and defer attributes.

HTML5: Transforming the Web with New Features and CapabilitiesMay 11, 2025 am 12:12 AM

HTML5transformswebdevelopmentbyintroducingsemanticelements,multimediacapabilities,powerfulAPIs,andperformanceoptimizationtools.1)Semanticelementslike,,,andenhanceSEOandaccessibility.2)Multimediaelementsandallowdirectembeddingwithoutplugins,improvingu

ID vs. Class in CSS: A Comprehensive ComparisonMay 11, 2025 am 12:12 AM

TherealdifferencebetweenusinganIDversusaclassinCSSisthatIDsareuniqueandhavehigherspecificity,whileclassesarereusableandbetterforstylingmultipleelements.UseIDsforJavaScripthooksoruniqueelements,anduseclassesforstylingpurposes,especiallywhenapplyingsty

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Notepad++7.3.1

Easy-to-use and free code editor

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Hot Topics

1664

1423

1321

1269

1249