元素隐藏的不同方式

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. GNU GRUB引导的默认启动项是ubuntu

    安装了ubuntu16.04后,GNU GRUB引导的默认启动项是ubuntu,如果希望默认启动项是windows,修改方法如下: step1. 进入Ubuntu系统,打开终端,输入 sudo ged ...

  2. Android 开发 Camera1_如何使用对焦功能

    前言 Camera1的自动对焦还是有一些坑值得开一个篇幅来讲解,一般对焦Mode有以下几种: Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO 连续自动对焦视 ...

  3. SaltStack远程执行Windows job程序(黑窗口)填坑经过

    近期接到领导通知,要将公司内的所有Windows服务添加到自动发布系统中,由于这种服务很多,节点分布散乱,每次都是由开发主管手动替换(虽然他们自己开发了自动打包替换工具,但仍需要一台一台登陆到服务器上 ...

  4. Python中死锁的形成示例及死锁情况的防止

    死锁示例搞多线程的经常会遇到死锁的问题,学习操作系统的时候会讲到死锁相关的东西,我们用Python直观的演示一下.死锁的一个原因是互斥锁.假设银行系统中,用户a试图转账100块给用户b,与此同时用户b ...

  5. 2016.9.17初中部下午NOIP普及组比赛总结

    2016.9.17初中部下午NOIP普及组比赛总结 2016.09.17[初中部 NOIP普及组 ]模拟赛 最近几次的题目都不是自己擅长的啊... 不过含金量挺高的,也好... 进度: 比赛:0+0+ ...

  6. MySQL操作表和表记录

    目录 操作表 增 列约束 列类型 删 改 修改表名 增加字段 修改字段 删除字段 查 复制表结构 操作表数据 增 删 改 查 操作表 增 创建表语法 创建一个表,多个字段: create table ...

  7. 「BZOJ2391」Cirno的忧郁

    传送门 设p[0] = (-10001,-10001) 把所有点按p[0]极角排序, s[i][j]表示三角形p[0]p[i]p[j]内的总价值,若i到j极角增大则s为正,否则s为负. 那么答案就是按 ...

  8. ftp文件上传下载命令

    介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验.  查看远程ftp服务器上用户lte**** ...

  9. java笔试之数字颠倒

    描述: 输入一个整数,将这个整数以字符串的形式逆序输出 程序不考虑负数的情况,若数字含有0,则逆序形式也含有0,如输入为100,则输出为001 package test; import java.ut ...

  10. 在VisualSVN创建新的Repository

    1,右键-创建 2,(暂时还没明白这两个选项的区别,暂时先使用第一个) 3, 库名称 4,(也不懂具体含义, 先默认) 5, 权限问题 6, 在需要用到这个库的工作文件夹内点击右键: -SVN检出 7 ...