元素隐藏的不同方式

dispaly, visibility, opacity, height&border 为0

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div{

      width: 300px;

      height: 200px;

      border:1px solid red;

    }

  </style>

</head>

<body>

<input type="button" value="显示效果" id="btn"/>

<div id="dv"></div>哈哈

<script src="common.js"></script>

<script>

  document.getElementById("btn").onclick=function () {

    //隐藏div

    //不占位

    //my$("dv").style.display="none";

    //占位

    //my$("dv").style.visibility="hidden";

    //占位

    //my$("dv").style.opacity=0;

    //占位

    //my$("dv").style.height="0px";

    //my$("dv").style.border="0px solid red";

  };

</script>

</body>

</html>

JS---元素隐藏的不同方式的更多相关文章

  1. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. 网站开发进阶(十七)Html元素隐藏的几种方式

    Html元素隐藏的几种方式 隐藏Html元素的方法最常用的方法有css的display:none,一种方法两种实现方式,感兴趣的朋友可以了解下. 1.使用css style="display ...

  4. html显示与隐藏元素的几种方式

    html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素   不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...

  5. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  6. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  7. HTML元素隐藏和显示

    在web前端开发过程中,经常会用到隐藏和显示元素的方法 总结:1.通过JS或Jquery控制          2.通过CSS样式控制 一.Js或jquery (jquery为例) 1.隐藏元素 使用 ...

  8. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

随机推荐

  1. 2.初始化spark

    参考:  RDD programming guide http://spark.apache.org/docs/latest/rdd-programming-guide.html  SQL progr ...

  2. linux centos 恢复 还原 备份 Snapper 快照说明

    为什么要使用Snapper快照? 我们可以想像以下场景: 1. 场景一:系统发生意外宕机,工程师无法快速定位问题,业务受到中断,客户十分不满意. 2. 场景二:项目会议上,就是否升级某软件到最新版本, ...

  3. 廖雪峰Java14Java操作XML和JSON-1XML-4第三方XML库

    总结: 使用Jackson可以快速在XML和JavaBean之间互相转换 可使用Annotation定制序列化和反序列化

  4. js实现iframe刷新

    今天要用到iframe的框架刷新,在网上找到了关于这方面内容,整理如下: (1)一般页面的刷新——reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForc ...

  5. Hibernate关联映射（一对多/多对多）

    版权声明:翀版 https://blog.csdn.net/biggerchong/article/details/843401053.  Hibernate关联映射上接Hibernate持久化类:h ...

  6. json-lib解决死循环

    1.添加lazy=“false”(两个xml文件中都要添加) 2.设置过滤器

  7. Spring Cloud Alibaba 使用Sentinel实现接口限流

    Sentinel是什么 Sentinel的官方标题是:分布式系统的流量防卫兵.从名字上来看,很容易就能猜到它是用来作服务稳定性保障的.对于服务稳定性保障组件,如果熟悉Spring Cloud的用户,第 ...

  8. OpenGL学习笔记2017/8/29

    OpenGL学习日志: 感谢doing5552 的OpenGL入门学习:http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 相 ...

  9. [转]8天玩转并行开发——第二天 Task的使用

    在我们了解Task之前,如果我们要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于 “任务的编程模型”所冲击,因为task会比thread具有更小的性能开销,不 ...

  10. ES6 class继承

    ES6 class继承 class类的继承 class可以通过extends关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多. class Point{ } class ColorP ...