html content hidden

HTML content hiding: CSS display attribute and JavaScript classList attribute

Content hiding in HTML can be achieved through various techniques, including using CSS display attribute, visibility attribute and opacity attribute, and Use JavaScript's classList attribute and style attribute, etc. In this article, we will introduce how to use the display attribute of CSS and the classList attribute of JavaScript to hide the content of HTML.

1. Use the display attribute of CSS to hide HTML content

The display attribute of CSS can control the way an element is displayed on the page. Commonly used display attribute values ​​include block, inline, inline-block, table, none, etc. Among them, the none value means that the element is completely removed from the page, that is, it does not occupy space on the page.

The following is an example of using the display attribute of CSS to hide content:

<div id="myDiv">这是一个要隐藏的文本。</div>

Wrap the text to be hidden in a div element, and set the CSS attribute for this div element:

#myDiv {
    display: none;
}

In this way, the text will be hidden and will no longer be displayed on the page.

It should be noted that when using the display:none attribute to hide an HTML element, the element will be completely removed and will not occupy space on the page. If you need to hide an element but still take up space, you can use the visibility:hidden attribute or the opacity:0 attribute.

2. Use JavaScript’s classList attribute to hide HTML content

JavaScript can hide HTML elements through DOM operations. Among them, the classList attribute can be used to obtain or modify the class attribute of the element. The class attribute is a string containing one or more class names separated by spaces. Use the classList attribute to easily add, delete and switch class names for elements.

The following is an example of using JavaScript's classList attribute to hide HTML content:

<div id="myDiv">这是一个要隐藏的文本。</div>

Wrap the text to be hidden in a div element, and add a new CSS class name hidden to this div element :

#myDiv {
    display: block;
}
.hidden {
    display: none;
}

var myDiv = document.getElementById("myDiv");
myDiv.classList.add("hidden");

In this way, the text will be hidden and will no longer be displayed on the page. When you need to display the text again, you only need to modify the CSS class name of the element to a class name that does not include hidden, as shown below:

myDiv.classList.remove("hidden");

In this way, the display attribute value of the element will be reset to the default Value (or block if not set previously).

3. Conclusion

HTML content hiding is a commonly used technology in Web development. This article introduces the use of CSS display attribute and JavaScript classList attribute to hide HTML content. The display attribute of CSS can easily hide elements, but it should be noted that hidden elements will be completely removed; while the classList attribute of JavaScript can dynamically hide and display elements, which is more flexible. In practical applications, different technologies can be chosen according to the actual situation.

The above is the detailed content of html content hidden. For more information, please follow other related articles on the PHP Chinese website!