javascript实现单按钮显示隐藏元素

简介: javascript实现单按钮显示隐藏元素

javascript实现单按钮显示隐藏元素


通过一个按钮,点击消失方块,再次点击出现方块

ed4117f0827c47fb853cc01edd06baca.png

代码如下:

js部分:

      function fun() {
        let a = document.getElementById('div_1')
        if(a.style.display == 'block'){
          a.style.display = 'none'
        }else{
          a.style.display = 'block'
        }
      }

html部分

  <body>
    <center>
      <div id="div_1" style='display: block;'>
      </div>
      <input type="button" value="点击" id="inp_1" onclick="fun()" />
    </center>
  </body>

需要注意的是要在div内设置display,用于切换属性

还有就是if判断是2个=,一个=是赋值,两个=是判定,三个=要看是不是相同地址

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
2月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
31 1
|
2月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
33 1
|
3月前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
27 0
|
6天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
19 10
|
6天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
1月前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
|
1月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素