在JavaScript中,通常通过获取元素对象,修改其style属性中的display值为none或block,实现隐藏或显示效果。接下来将通过具体示例进行说明。
1、 创建一个名为test.html的文件,用于演示如何使用JavaScript修改元素的display属性。
2、 在test.html中,用p标签编写多段测试文字,为每个p标签设置唯一的id属性,便于后续通过JavaScript获取对应的元素对象进行操作。
3、 在test.html中,通过CSS将id为p2的p标签设置为隐藏状态,并将其文字颜色调整为红色。
4、 在test.html文件中,通过button标签创建按钮,并为其添加onclick点击事件,当用户点击该按钮时,将触发并执行redis()函数。
5、 在test.html的js标签中定义redis()函数,通过该函数修改指定p元素的display样式属性。
6、 在redis()函数中,利用getElementById()方法获取id为p2的元素对象,并将其样式中的display属性设为block,从而实现元素的显示。
7、 用浏览器打开test.html,点击按钮即可查看效果。
