style.display属性是style对象的display属性,style对象用于自由更改元素的样式。例如,您可以添加各种样式,比如元素的高度和宽度,颜色和背景等。

我们来看看display属性
display属性具有指定元素的显示样式的作用。
不显示元素,或者作为块元素显示,或者可以指定各种显示方法
立即学习“Java免费学习笔记(深入)”;
style.display属性的基本用法
我们来看代码如下
在上面的代码中使用style.display属性显示或隐藏图像。
首先,img标签用于显示图像,在图像下创建了两个按钮。
第一个按钮是隐藏图像的Hide按钮。
第二个按钮是show按钮可再次显示图像。

为“Hide”按钮的onclick属性指定了hide函数。
hide函数首先使用getElementById方法获取image元素。
获取image元素后,我们访问该元素的style.display属性并指定字符串none。
您可以通过替换值none来隐藏元素。
点击hide按钮图片隐藏

单击hide按钮将清除图像消失并提升按钮的位置。
相反,单击“显示”按钮,图像将重新出现。
show函数是为Show按钮的onclick属性指定的。
与hide函数一样,show函数在使用getElementById方法获取image元素后访问style.display属性。
然后,代替字符串block,通过这样做,可以显示图像块,并且再次显示图像。

display和visibility有什么区别?
在上面的示例代码中,使用style对象的display属性更改图像的显示设置。
但是,除了display属性之外,还可以使用visibility属性显示或隐藏图像。
代码如下
在上面的代码中,我们创建了两个按钮来隐藏图像。
第一个是Hide with DISPLAY按钮,它使用与以前相同的display属性。
第二个是Hide with VISIBILITY按钮,使用visibility属性隐藏。

为第二个按钮的onclick属性指定了hide2函数。
hide2函数使用getElementById方法获取image元素并访问style.visibility属性。
然后,通过替换隐藏的字符串,隐藏图像。
如前所述,单击按钮将导致图像消失,图像下方的按钮将上升。
但是,如果使用visibility的单击按钮,则有图像的部分将仅为空白,空间将会保留。

可以明显看到按钮保持在原来位置,图像的位置空白且空间保留。











