记录一下各种隐藏html元素的方法

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

  <div id="rrapp">

      <input type="button" value="Vue隐藏DIV" v-on:click="testdisplay1()">

      <input type="button" value="根据ID隐藏DIV" v-on:click="testdisplay2()">

      <input type="button" value="根据ID隐藏DOM" v-on:click="testdisplay3()">

      <input type="button" value="根据类型隐藏标签" v-on:click="testdisplay4()">

      <input type="button" value="根据class隐藏DIV" v-on:click="testdisplay5()">

      <br/><br/><br/>

      <div v-show="isdisplay" style="width: 100px;height: 100px;background: red">test1</div>

      <div id="test2" style="width: 100px;height: 100px;background: yellow">test2</div>

      <input type="button" id="test3" value="确定"/>

      <p>测试P标签隐藏</p>

      <div class="test5" >测试隐藏class一样的DIV</div>

      <div class="test5" >测试隐藏class一样的DIV</div>

  </div>

  <script type="text/javascript">

    var vm = new Vue({

        el:'#rrapp',

        data:{

            isdisplay:true,

        },

        methods:{

            testdisplay1:function(){

                vm.isdisplay = !vm.isdisplay;

            },

            testdisplay2:function(){

                   $("#test2").css("display", "none");

            },

            testdisplay3:function(){

                   $('#test3').hide();

            },

            testdisplay4:function(){

                   $("p").hide();

            },

            testdisplay5:function(){

                   $(".test5").hide();

            }

        }

    });

  </script>

</body>

</html>

hidden是html中的属性，规定元素是否可见
display是css中的样式,规定元素是否显示
visible 是css中的样式,规定元素是否可见
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
$("#id").hide()实际上是设置了css中的display为none,$("#id").show()实际上是设置了css中的display为block。这一点通过查看jQuery源码可知。

css里面的display会覆盖html中的hidden属性

隐藏网页中DIV和DOM的各种方法的更多相关文章

  1. 网页中插入javascript的几种方法

    网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...

  2. 网页中Div的打印

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. JS获取网页中HTML元素的几种方法分析

    getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getEle ...

  4. jQuery动态显示和隐藏datagrid中的某一列的方法

    在EasyUI中: 1)展示某列的方法:     $('#jgrid').datagrid('showColumn', 'XXX');  -----其中 XXX 是隐藏列的  field 属性值 2) ...

  5. Android 使用XML隐藏ActionBar中遇错的解决的方法

    今天我在使用Menifest.xml让程序隐藏标题栏是一直出错.主要内容是: You need to use a theme.AppCompat theme(descendant) with this ...

  6. Delphi的WebBrowser改造，对网页中Alter等对话框的改造方法（通过COM来改造）

    刚有一段时间没做博客了,今天刚好有人问了这个问题,而自己以前也弄过,于是这里有了一篇新的博文. 关于改造WebBrowser控件的一些技巧,大家可以参考MSDN或者蒋晟写的一个东西,里面有讲的很详细的 ...

  7. web 开发之js---js 实现网页中播放wav的一种方法（flash播放器）

    http://blog.csdn.net/whumr1/article/details/6948160

  8. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  9. 网页中插入外部视频的几种方法（PC与手机网页通用）

    网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...

随机推荐

  1. mbpoll Test FreeModbus TCP Demo

    /********************************************************************************* * mbpoll Test Fre ...

  2. IK 中文分词器

    链接:https://github.com/wks/ik-analyzerIKAnalyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始,IKAna ...

  3. Linux命令学习之路——变更文档拥有者:chown

    使用权限:root用户 使用方式:chown [ -cvfRh ] [ --help ] [ --version ] user[ :group ] file... 作用:该命令用于改变文档的拥有者 注 ...

  4. .net core 微服务架构-docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务（asp.net core web api）

    本文主要介绍通过Docker来部署通过.Net Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(asp.net c ...

  5. java-源文件中可以有多个类，但是最多只能有一个public修饰

    1.如果源文件中有多个类,那么只能有一个类是public类:如果有一个类是public类,那么源文件的名字必须与这个类的名字完全相同,扩展名是.java. 2.如果源文件中没有public类,那么源文 ...

  6. fold算法（拉格朗日插值）

    如果打表发现某个数列: 差分有限次之后全为0 例如: 2017新疆乌鲁木齐ICPC现场赛D题 ,,,,,,,,,,…… [2018江苏南京ICPC现场赛也有这样的题目] 那么可以使用以下黑科技计算出第 ...

  7. 【idea】清除类中无用的包

    快捷键 ctrl+alt+o 自动清除的配置方法 可以settings-general-auto import-java项,勾选optimize imports on the fly,在当前项目下会自 ...

  8. MongoDB 副本集 pymongo使用

    搭建没有仲裁节点的副本集,推荐使用 2.清空node2的db文件夹 和 log 文件夹 rm -rf /var/lib/mongod/* rm -rf /var/log/mongod/* 3.修改no ...

  9. python基础教程_学习笔记9：抽象

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/signjing/article/details/30745465 抽象 懒惰即美德. 抽象和结构 抽 ...

  10. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...