隐藏网页中DIV和DOM的各种方法
记录一下各种隐藏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的各种方法的更多相关文章
- 网页中插入javascript的几种方法
网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...
- 网页中Div的打印
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS获取网页中HTML元素的几种方法分析
getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getEle ...
- jQuery动态显示和隐藏datagrid中的某一列的方法
在EasyUI中: 1)展示某列的方法: $('#jgrid').datagrid('showColumn', 'XXX'); -----其中 XXX 是隐藏列的 field 属性值 2) ...
- Android 使用XML隐藏ActionBar中遇错的解决的方法
今天我在使用Menifest.xml让程序隐藏标题栏是一直出错.主要内容是: You need to use a theme.AppCompat theme(descendant) with this ...
- Delphi的WebBrowser改造,对网页中Alter等对话框的改造方法(通过COM来改造)
刚有一段时间没做博客了,今天刚好有人问了这个问题,而自己以前也弄过,于是这里有了一篇新的博文. 关于改造WebBrowser控件的一些技巧,大家可以参考MSDN或者蒋晟写的一个东西,里面有讲的很详细的 ...
- web 开发之js---js 实现网页中播放wav的一种方法(flash播放器)
http://blog.csdn.net/whumr1/article/details/6948160
- 【Web技术】401- 在 React 中使用 Shadow DOM
本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...
- 网页中插入外部视频的几种方法(PC与手机网页通用)
网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...
随机推荐
- 深入理解Java中的多态
一.什么是多态? 多态指同一个实体同时具有多种形式.它是面向对象程序设计(OOP)的一个重要特征.如果一个语言只支持类而不支持多态,只能说明它是基于对象的,而不是面向对象的. 二.多态是如何实现的? ...
- 百练6247-过滤多余的空格-2015正式B题
B:过滤多余的空格 总时间限制: 1000ms 内存限制: 65536kB 描述 一个句子中也许有多个连续空格,过滤掉多余的空格,只留下一个空格. 输入 一行,一个字符串(长度不超过200),句子的 ...
- JAVA基础部分复习(五、JAVA反射)
关于反射: 1.需要了解jvm类的加载机制(java高级部分会详细介绍) 2.反射的API其实只要多看看API和源码,很容易就懂了. 下面是代码,简单讲解反射的使用: import java.lang ...
- Redis整理
1. Redis采用的是单进程多线程的模式.当redis.conf中选项daemonize设置成yes时,代表开启守护进程模式.在该模式下,redis会在后台运行,并将进程pid号写入至redis.c ...
- Django中的session于cookie的用法
1.cookies 1.django 中使用 cookies 1.设置cookies的值(将数据保存到客户端) 语法: 响应对象.set_cookie(key,value,expires) key:c ...
- Unity 3D Shader流水线
Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- maven 构建 war文件&&Glassfish运行+部署war文件+访问(命令行模式)
Glassfish常用命令 asadmin start-domain --verbose #启动Glassfish服务器(默认domain1) ,并在终端显示相关信 ...
- THML文档布局元素
学习要点: 1.文档元素总汇 2.文档元素解析 一.文档元素总汇 文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. 元素名称 ...
- Java中final的用法总结
1. 修饰基础数据成员的final 这是final的主要用途,其含义相当于C/C++的const,即该成员被修饰为常量,意味着不可修改.如java.lang.Math类中的PI和E是f ...
- Singer 学习三 使用Singer进行mongodb 2 postgres 数据转换
Singer 可以方便的进行数据的etl 处理,我们可以处理的数据可以是api 接口,也可以是数据库数据,或者 是文件 备注: 测试使用docker-compose 运行&&提供数据库 ...