JavaScript 控制层显示或隐藏的方法
在前端开发中,经常需要使用 JavaScript 来控制页面元素的显示和隐藏。本文将介绍几种常见的方法,并附带详细的示例代码。
1. 使用 CSS 的 display 属性
CSS 的 display
属性可以用来控制元素的显示和隐藏。通过设置 display: none;
可以将元素隐藏起来,通过设置 display: block;
或其他值(如 inline
、flex
等)可以让元素重新显示出来。
--------- ----- ------ ------ ----------------- ------------------- ------ ---------------- ------ - -------- ----- - -------- ------- ----------------------- -------- --------- - ---------------------------------------------- - -------- - -------- --------- - ---------------------------------------------- - ------- - --------- ------- ------ ------- ------------------------------- ------- ------------------------------- ---- ----------- ------------------- ------ ------- -------
2. 使用 CSS 的 visibility 属性
CSS 的 visibility
属性也可以用来控制元素的显示和隐藏。与 display
属性不同的是,使用 visibility: hidden;
可以将元素隐藏起来,但是仍然占据原来的空间,使用 visibility: visible;
可以让元素重新显示出来。
--------- ----- ------ ------ ----------------- ------------------- ------ ---------------- ------ - ----------- ------- - -------- ------- ----------------------- -------- --------- - ------------------------------------------------- - ---------- - -------- --------- - ------------------------------------------------- - --------- - --------- ------- ------ ------- ------------------------------- ------- ------------------------------- ---- ----------- ------------------- ------ ------- -------
3. 使用 JavaScript 的 DOM 操作
除了使用 CSS 属性控制元素的显示和隐藏之外,还可以使用 JavaScript 的 DOM 操作直接修改元素的 style
属性。设置 display: none;
可以将元素隐藏起来,通过将 display
属性设置为其他值可以让元素重新显示出来;设置 visibility: hidden;
可以将元素隐藏起来,通过将 visibility
属性设置为 "visible" 或 "inherit" 可以让元素重新显示出来。
--------- ----- ------ ------ ----------------- ------------------- ------- ----------------------- -------- --------- - ---------------------------------------------- - -------- - -------- --------- - ---------------------------------------------- - ------- - -------- ---------- - -------------------------------------------------- - ---------- - -------- ---------- - -------------------------------------------------- - --------- - --------- ------- ------ ------- ------------------------- ----------------- ------- ------------------------- ----------------- ---- ----------- ------------------- ------ ------- -------------------------- -------------------- ------- -------------------------- -------------------- ---- ------------ ------------------- ------ ------- -------
总结
本文介绍了几种常见的 JavaScript 控制层显示或隐藏的方法,包括使用 CSS 的
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/3706