元素隐藏的不同方式

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. 深入理解Java虚拟机（类加载机制）

    文章首发于微信公众号:BaronTalk 上一篇文章我们介绍了「类文件结构」,这一篇我们来看看虚拟机是如何加载类的. 我们的源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机 ...

  2. Miler-Rabbin素数判定

    前言 素数判定? 小学生都可以打的出来! 直接暴力O(n)O(\sqrt n)O(n​)-- 然后就会发现,慢死了-- 于是我们想到了筛法,比如前几天说到的詹欧筛法. 但是线性的时间和空间成了硬伤-- ...

  3. idea加载完文件报错：java:-source 1.7中不支持lambda表达式 解决方案

    1.file - Project Structure ctrl+alt+shift+s 2.modules 中把7换成8

  4. eigen矩阵操作练习

    // // Created by qian on 19-7-16. // /* 相机位姿用四元数表示 q = [0.35, 0.2, 0.3, 0.1] x,y,z,w * 注意:输入时Quatern ...

  5. shell与crontab定时器的结合

    crond服务 以守护进程方式在无需人工干预的情况下来处理一些列的作业指令与服务 查看服务状态 systemctl status cron.service 停止服务 systemctl stop cr ...

  6. js算法之寻路

    A*寻路算法 算法流程说明: 说明:起始节点记作S,目标节点记作E,对于任意节点P,从S到当前节点P的总移动消耗记作GP,节点P到目标E的曼哈顿距离记作HP,从节点P到相邻节点N的移动消耗记作DPN, ...

  7. C++ 函数模板&类模板详解

    在 C++ 中,模板分为函数模板和类模板两种.函数模板是用于生成函数的,类模板则是用于生成类的. 函数模板&模板函数     类模板&模板类  必须区分概念 函数模板是模板,模板函数时 ...

  8. <meta>标记

    <meta>的主要作用: 是提供网页的元素信息 属性: http-equiv: 功能: 默认http协议文件头信息,当信息从服务器端传到客户端时,让浏览器正确的是显示, http_equi ...

  9. Git命令使用和配置

    git config --global user.name "your name" git config --global user.email "your email& ...

  10. Spring注解驱动(下)

    9.@PropertySource 加载配置文件 在xml中 我们加载property配置文件,是使用 <context:property-placeholder location=" ...