js div的显示和隐藏
<head>
<title></title>
<style type="text/css">
div
{
display:block;
}
</style>
<script type="text/javascript">
onload = function () {
//隐藏
document.getElementById('btnHidde').onclick = function () {
document.getElementById('dv').style.display = 'none';
};
//显示
document.getElementById('btnShow').onclick = function () {
document.getElementById('dv').style.display = 'block';
};
//切换
document.getElementById('btn').onclick = function () {
var dvObj = document.getElementById('dv');
alert(dvObj.style.display);
if (dvObj.style.display == 'none') {
dvObj.style.display = 'block';
} else {
dvObj.style.display = 'none';
}
};
};
</script>
</head>
<body>
<input type="button" name="name" value="显示" id="btnShow" />
<input type="button" name="name" value="隐藏" id="btnHidde" />
<input type="button" name="name" value="显示/隐藏" id="btn" />
<div id="dv" style=" width:300px; height:200px; background-color:Green;">
</div>
</body>
js div的显示和隐藏的更多相关文章
- 原生JS的移入溢出控制div的显示与隐藏
原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性
- div的显示和隐藏
本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...
- 简简单单,jquery中,使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- jquery实现点击控制div的显示和隐藏
我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...
- jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...
- js密码修改显示与隐藏效果
一.添加input框 <form class="login_form"> <input class="password inputpwd" i ...
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- js div 内容显示分页
由于工作需要 div固定大小 而内容不定 所以 如果内容过多自然就显示不出来了 所以 需要分页一类的功能下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
随机推荐
- 【2001】关于N!的问题
Time Limit: 3 second Memory Limit: 2 MB 编写程序,计算n!以十进制数形式表示的数中最右边一个非零数字,并找出在它右边有几个零. 例如:12!=1*2*3*4*5 ...
- 【35.43%】【hdu 4347】The Closest M Points
Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 98304/98304 K (Java/Others) Total Submissio ...
- matlab 下的集成学习工具箱
matlab 当前支持的弱学习器(weak learners)类型分别为: 'Discriminant' 'knn' 'tree' 可通过 templateTree 定义: 1. fitcensemb ...
- MySQL 监控-innotop
innotop 编写者Balon Schwartz,<高性能MySQL>的作者之一. innotop的作用为实时地展示服务器正在发生的事情,监控innodb,监控多个MySQL实例,是一款 ...
- Android图文具体解释属性动画
Android中的动画分为视图动画(View Animation).属性动画(Property Animation)以及Drawable动画.从Android 3.0(API Level 11)開始. ...
- Android 调整透明度的图片查看器
本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下: main.xml部分代码如下: <?xml version="1.0" encoding ...
- <a href='javacript:' title='{$str}'>是什么意思(多看学习视频)
<a href='javacript:' title='{$str}'>是什么意思(多看学习视频) 一.总结 一句话总结: 1.javascript:是什么? 伪协议,后面接javascr ...
- javascript中隐藏显示的样式表属性
display属性 隐藏不占据位置 visibility属性 隐藏占据位置 //使用display的样式属性 隐藏 显示 //隐藏后不占据文档流位置 function showAddForm(){ v ...
- java phoenix 连接hbase
<dependency> <groupId>org.apache.phoenix</groupId> <artifactId>phoenix-core& ...
- 属性动画Property Animation
ViewPropertyAnimation 使用方式:View.animate() 后跟 translationX() 等方法,动画会自动执行. 注意translationX实现是调用对应的set方法 ...