元素隐藏的不同方式

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. 「题解」：[BZOJ4358]permu

    问题: permu 时间限制: 30 Sec  内存限制: 512 MB 题面 题目描述 给出一个长度为n的排列P(P1,P2,...Pn),以及m个询问.每次询问某个区间[l,r]中,最长的值域 连 ...

  2. Python-函数基础(1)

    目录 函数定义 什么是函数? 定义函数三种形式 函数定义的特性 函数调用 函数返回值 return的特性: 函数的参数 有参函数 形参 位置形参 默认形参 实参 位置实参 关键字实参 可变长参数 形参 ...

  3. DRF 序列化组件单增

    目录 自定义序列化(矬) Serializer类(方式繁琐) 底层序列化类 UserSerializer 视图序列化步骤 底层反序列化类 UserCreatSerializer 视图反序列化步骤 Mo ...

  4. sql.xml 循环插入与修改写法

    // 插入 (交互一次数据库) <insert id="insertClient"> insert into m_linknodeclient (LinkClientI ...

  5. 国内平台比特币(Bitcoin)搬砖流程教学

    建议搬砖时要的价差,实际费用与利润请自行计算,避免亏损或白做工请自行拿捏利润. 请搬砖前要先自行操作与确认双边平台的存取速度.利於拿捏时间,避免时间差导致亏损. (所有内容 仅供参考 盈亏自负) 搬砖 ...

  6. C++ 字符串、string、char *、char[]、const char*的转换和区别

    1.字符串 字符串本质就是一串字符,在C++中大家想到字符串往往第一反应是std::string(后面简称string) 字符串得从C语言说起,string其实是个类,C语言是没有class的,所以C ...

  7. Cocos2d-x 创建工程python脚本

    @echo offset /p projectName=请输入项目名称:if "%projectName%"=="" goto inputErrorset /p ...

  8. StringBuffer清空

    转载自:http://blog.sina.com.cn/s/blog_56fd58ab0100qfcz.html 在开发程序的时候,经常使用StringBuffer来进行字符串的拼接.如果在循环中来反 ...

  9. Less主要用法

    一.混合(Mixin) 原css中的样式如: .header { width:200px; height:100px; } .header .word{ color:red; } less中的写法可以 ...

  10. elasticsearch 中文API river

    river-jdbc 安装 ./bin/plugin --install jdbc --url http://xbib.org/repository/org/xbib/elasticsearch/pl ...