HTML元素的可见与不可见,主要通过设置元素的display属性,可见状态display为block,不可见状态display为none。下面以点击按钮显示或隐藏div元素为例,说明JS是如何控制一个HTML元素的可见与不可见状态的。
具体介绍:
在html页面中添加一个div元素,并使用CSS把它的样式变成长为200px,宽也为200px的黄色正方形。
添加一个类型为button的input按钮,用于点击按钮实现可以与不可见状态的切换。
给input按钮绑定一个onclick点击事件,当点击这个按钮的时候,触发对HMTL元素的操作。
在onclick事件内定义一个点击触发的函数display(), 当input按钮被点击的时候,就会去执行display()函数。
在test.html内编写函数display()的JS代码,实现当div为显示时,点击按钮把它隐藏(即不可见状态);当div元素为不可见时,点击按钮把它显示出来。
在浏览器运行test.html,查看实现的效果。
可见,已成功实现使用JS控制HTML元素的可见与不可见状态。
更多web前端知识,请查阅 HTML中文网 !!