1. 运用 `display: none;`: 当你设置一个元素的 `display` 特点为 `none` 时,该元素及其一切子元素都会从文档流中彻底移除,不占有任何空间,也不会影响页面布局。
```html .hidden { display: none; }
This content is hidden. ```
2. 运用 `visibility: hidden;`: 设置元素的 `visibility` 特点为 `hidden` 会使元素不行见,但它依然占有页面上的空间,因而会影响布局。
```html .hidden { visibility: hidden; }
This content is invisible but still takes up space. ```
3. 运用 `opacity: 0;`: 将元素的 `opacity` 设置为 `0` 会使元素彻底通明,因而不行见,但它依然保留在文档流中,占有空间,不影响布局。
```html .hidden { opacity: 0; }
This content is transparent and invisible. ```
4. 运用 `position: absolute;` 和 `left: 9999px;`: 将元素定位到屏幕外,使其不行见。这种办法一般用于躲藏但不期望从文档流中移除的元素。
```html .hidden { position: absolute; left: 9999px; }
This content is offscreen and invisible. ```
5. 运用 `textindent: 9999px;` 和 `overflow: hidden;`: 这种办法一般用于躲藏文本内容,但坚持元素的空间和布局。
```html .hiddentext { textindent: 9999px; overflow: hidden; }
This text is hidden but the element still takes up space. ```
6. 运用 `height: 0;` 和 `overflow: hidden;`: 这种办法能够躲藏元素的高度,使其不行见,但元素依然占有宽度。
```html .hiddenheight { height: 0; overflow: hidden; }
This element is hidden but still takes up width. ```
7. 运用 `width: 0;` 和 `overflow: hidden;`: 这种办法能够躲藏元素的宽度,使其不行见,但元素依然占有高度。
```html .hiddenwidth { width: 0; overflow: hidden; }
This element is hidden but still takes up height. ```
8. 运用 `pointerevents: none;`: 这种办法会使元素不响应鼠标事情,如点击、悬停等,但元素依然可见。
```html .hiddenevents { pointerevents: none; }
This element does not respond to mouse events. ```
CSS中的`visibility`特点能够用来操控元素的可见性。将`visibility`特点设置为`hidden`能够躲藏元素,但元素依然占有空间。
```css
.hidden {
visibility: hidden;
`display`特点能够用来操控元素的显现办法。将`display`特点设置为`none`能够彻底躲藏元素,包含其占位空间。
```css
.hidden {
display: none;
`opacity`特点能够操控元素的通明度。将`opacity`设置为小于1的值能够使元素半通明,然后完成躲藏作用。
```css
.hidden {
opacity: 0;
transition: opacity 0.5s;
经过`document.getElementById()`办法获取元素目标,然后设置其`style`特点来躲藏或显现元素。
```javascript
function hideElement() {
var element = document.getElementById('elementId');
element.style.display = 'none';
经过`document.getElementsByClassName()`办法获取一组元素目标,然后遍历这些目标并设置其`style`特点来躲藏或显现元素。
```javascript
function hideElements() {
var elements = document.getElementsByClassName('elementClass');
```html
上一篇:呼应式css
下一篇: html新特性,引领网页开发新潮流