开发工具与关键技术: 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")
- 给按钮标签设置鼠标点击事件
(5)在(4)内给个判断功能(如果/否则)
五、整体代码如下:
六、最后我们到浏览器试下效果,如下图:鼠标点击按钮,看图箭头
七、效果如下:【可切换(隐藏/显示)】