使用hidden属性

<div hidden>hello</div>

使用hidden属性的效果就是在渲染DOM时，会自动把该元素的display属性改为none。注意，hidden属性的唯一用途就在此处：只在第一次添加hidden属性时把display改为none。以后即便display属性变成了block，hidden属性依旧在那里放着。
由此可知，hidden和display=none产生的效果是相同的。但是不如display更直接、更根本。因此，以后不要使用hidden属性，直接访问style中的display属性。

使用style.display

jQuery中的hide、show、toggle等控制显示和隐藏的方法就是使用display属性。
display=none能够让一个元素彻底消失，无影无踪，不占空间。

使用style.visibility

style中的visibility=false时，元素像隐形了一样，但是依旧占据原来的空间。

转载于:https://www.cnblogs.com/weiyinfu/p/10235480.html

html元素不可见的三种方式相关推荐

js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
Python找出列表中出现次数最多的元素三种方式
通过三种方式给大家介绍,具体详情如下所示: 方式一: 原理:创建一个新的空字典,用循环的方式来获取列表中的每一个元素,判断获取的元素是否存在字典中的key,如果不存在的话,将元素作为key,值为列表中 ...
元素隐藏的三种方式对比（针对移动端项目中的按钮，先隐藏且不能被点击 visibility:hidden）
元素隐藏的三种方式对比 display:none opacity:0 visibility:hidden 项目需求表面一个图片遮罩,鼠标hover遮罩消失,内部元素展现,其中有一个按钮在移动端是手指 ...
html一般用那种方式定位,使用三种方式定位html中的元素
使用三种方式定位html中的元素发布时间:2020-06-06 14:46:00 来源:51CTO 阅读:687 作者:知止内明 1)使用三种方式定位html中的元素 a)通过ID $(" ...
v html如何添加样式,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
vue v-html字体大小修改,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别和三种方式写光棒事件动画...
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
Python读取文本的三种方式对比
1.概述 Python有三种读取文本的方式,分别是: read() readline() readlines() 2.三种方式的优缺点分析 2.1 read() 最简单的一种方法,一次性读取文件的所有 ...

html元素不可见的三种方式

使用hidden属性

使用style.display

使用style.visibility

html元素不可见的三种方式相关推荐

最新文章

热门文章