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

在日常开发中发现,关于隐藏一个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://pjax.vip/156.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

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

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

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


既然没有吐槽,那就赶紧抢沙发吧!