利用JavaScript设置隐藏功能

开发工具与关键技术： DW、JavaScript

作者：张秋豪

撰写时间：2021/5/13

一、在DW开发工具中新建一个html文档

      然后给它设置一个div标签和一个按钮<button>标签

      给它们设置类和Id，便于下一步设置功能。

 

二、因为是个小功能效果，所以直接在html文本中给个样式css标签（1）<style>和JavaScript标签（2）<script>,再给div设置宽、高和背景颜色。

 

三、Ctrl+s保存，去到浏览器看下效果。

 

四、在JavaScript标签<script>内设置功能：

       display: none;隐藏   display: block;显示

（3）先声明俩个变量Id

      var box=document.getElementById("dox")

       var an=document.getElementById("an")

1. 给按钮标签设置鼠标点击事件

（5）在（4）内给个判断功能（如果/否则）

 

五、整体代码如下：

 

六、最后我们到浏览器试下效果，如下图：鼠标点击按钮，看图箭头

 

七、效果如下：【可切换（隐藏/显示）】