在前端中隐藏一个元素的几种方法与注意事项

    选择打赏方式

在日常开发中发现,关于隐藏一个div或其他的元素的需求还蛮多的,所以就打算总结一下几种隐藏方法:

1.CSS display属性

dispaly: none;

2.CSS visibility属性

visibility: hidden;

3.CSS opacity属性

opacity: 0;

4.表单元素type类型为隐藏

<input type="hidden" value="阅客网">

5.原生JS设置visibility属性

document.getElementById("idname").style.visibility="hidden";//隐藏
document.getElementById("idname").style.visibility="visible";//显示

6.原生JS设置display属性

document.getElementById("idname").style.display="none";//隐藏
document.getElementById("idname").style.display="inline";//显示

7.Jquery方法

$("selector").hide();//隐藏
$("selector").show();//显示

8.当宽度和高度都设置为0时,这个元素是不显示的

9.当一个父元素是隐藏的,子元素也会跟着隐藏

通过visibility和opacity隐藏元素之后,仍会占用空间,显示出空白区域;而其他的方法均不会占用原来的空间位置

版权声明:若无特殊注明,本文为《傲世》原创,转载请保留文章出处。
本文链接:https://www.recho.cn/154.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 吐舌 开心 笑眼 可怜 乖 啊 你懂得 不高兴 生气 汗 黑线 哭 真棒 阴险 鄙视 酷 滑稽 纳尼 疑问 委屈 惊讶 勉强

评论信息框
可使用QQ号实时获取头像自动填写

私密评论

吃奶的力气提交吐槽中...


竟然没有人吐槽,快赶紧抢沙发吧!