元素隐藏的不同方式

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. loj6005 [网络流24题]最长递增子序列

    题意:给你一个序列,求不严格上升lcs长度/最多有几个没有重复元素的lcs/如果x1和xn可以多次出现,求最多有几个lcs?n<=500. 标程: #include<cstdio> ...

  2. IDA*算法——骑士精神

    例题 骑士精神 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者 ...

  3. sulin Python3.6爬虫+Djiago2.0+Mysql --实例demo

    1.切换到项目目录下,启动测试服务器 manage.py runserver 192.168.0.108:8888 2.设置相关配置 项目目录展示如下: beauty=>settings.py ...

  4. Java-MyBatis-MyBatis3-XML映射文件：XML映射文件

    ylbtech-Java-MyBatis-MyBatis3-XML映射文件:XML映射文件 1. XML 映射文件 MyBatis 的真正强大在于它的映射语句,这是它的魔力所在.由于它的异常强大,映射 ...

  5. nprogress 转

    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...

  6. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  7. 最新二进制安装部署kubernetes1.15.6集群---超详细教程

    00.组件版本和配置策略 00-01.组件版本 Kubernetes 1.15.6 Docker docker-ce-18.06.1.ce-3.el7 Etcd v3.3.13 Flanneld v0 ...

  8. WPF+MVVM+EF示例1

    实现了那些功能,先看看效果图: 项目工程目录: 接下来开始具体的步骤: 第一步:在VS中新建工程 第二步:使用NuGet 安装EntityFramework 第三步:使用NuGet 安装EntityF ...

  9. HtmlHelper1

    <div> @using(Html.BeginForm("Test","Default")) { 4 @Html.TextBox("nam ...

  10. vue @click传字符串

    参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...