elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)
或者style.visibility实际上会使div仍然在那里,但是是“全空”或“全白色”
elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';
var div = document.getElementById('div_id');
// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';
// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
9条答案
按热度按时间hmae6n7t1#
如果[DIV]是元素,则
或
hmtdttj42#
让我们假设您没有使用jQuery之类的库。
如果还没有对DOM元素的引用,请使用
var elem = document.getElementById('id');
获取一个然后您可以设置该元素的任何CSS属性。要显示/隐藏,您可以使用两个属性:
display
和visibility
,它们具有略微不同的效果:调整
style.display
将看起来好像元素根本不存在(“已删除”)。或者
style.visibility
实际上会使div仍然在那里,但是是“全空”或“全白色”如果您使用jQuery,那么只要您希望设置
display
属性,就可以更容易地完成此操作:它将自动使用适当的
display
值;您不必关心元素类型(内联或块)。另外,elem
不仅可以是DOM元素,还可以是选择器,如#id
或.class
或任何其他有效的CSS3(以及更多!)。ssgvzors3#
您可以使用
visibility
或display
,但您必须将变更套用至div.style
对象,而非div
对象本身。xdnvmnnf4#
您可以使用DOM函数:setAttribute和removeAttribute。在下面的链接中,您将看到如何使用它们的示例。
setAttribute and removeAttribute functions
快速查看:
1qczuiv05#
您可以使用
opacity
,它类似于visibility
,但允许平滑过渡和控制其他参数,如高度(为了简化代码片段,我将js逻辑直接放在html中-不要在产品代码中这样做)第一个
webghufk6#
使用CSS使不可见
使用Javascript使其可见
0yycz8jy7#
使用DOM元素的'hidden'属性:
nqwrtyyt8#
ID是您的div的名称。确保在Div中有runat=“server”。
lsmepo6l9#
截至2022年11月,浏览器对CSS还原值的支持为94.56%(https://caniuse.com/?search=revert),因此如果要隐藏,请使用
用于可见性用途
这个posolite不关心元素类型
注意:
revert
关键字与initial
关键字不同,不应与之混淆,后者使用CSS规范在每个属性基础上定义的 * 初始值 *。相反,用户代理样式表根据CSS选择器设置默认值。例如,
display
属性的 * 初始值 * 是inline
,而一般的使用者代理程式样式表会将<div>
s的预设display
值设定为block
,将<table>
s的预设display
值设定为table
,依此类推。revert