<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#box{

width: 100px;

height: 100px;

background-color: #F0F;

display: none;

}

</style>

</head>

<script type="text/javascript">

window.onload=function(){

var oBtn=document.getElementById('btn');

var oDiv=document.getElementById('box');

oBtn.onclick=function(){

if(oDiv.style.display=='none'){

oDiv.style.display='block';

}else{

oDiv.style.display='none';

}

}

}/*if的判断条件找的是行间样式 现在行间样式是display:block; 所以第一次执行的是oDiv.style.display='none';正确做法 1. if(oDiv.style.display=='block'){

oDiv.style.display='none';

}else{

oDiv.style.display='block';

}

2. 把内部样式的display:none;改为 行间样式display:none; */

</script>

<body>

<input type="button" value="登陆" id="btn">

<div id="box"></div>

</body>

</html>

js显示隐藏的更多相关文章

  1. JS 显示隐藏DIV

    JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

  2. 执行js，通过js显示隐藏的输入框，或者给input赋值

    在测试过程中,有些输入框是隐藏的,如果直接对他进行赋值,会找不到这个输入框,从而导致脚本运行失败. 例如下面的这个密码输入框: 登录密码输入框分为两个input,下面的是提示的,上面的才是真正存下来的 ...

  3. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  4. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

  5. 移动端右侧导航 显示隐藏js

    transform与fixed影响 html按钮 <span class="nav-btn"></span> <span class="cl ...

  6. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  7. 旁门左道通过JS与纯CSS实现显示隐藏层

    想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.

  8. JS组件系列——显示隐藏密码切换的jQuery插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

随机推荐

  1. 上传图片插件鼠标手cursor:pointer;不生效

    问题: 只在谷歌里失效; 解决: font-size:0; 参考: http://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html htt ...

  2. golang print struct with key

    https://play.golang.org/p/YMfpuluzef 判断结构体是否为空 打印带attribute(key) 的结构体 package main import ( "fm ...

  3. 高级java必会系列二：多线程经常使用的3个关键字：synchronized、ReentrantLock、volatile

    系列一讲解了多线程,本章讲解多线程开发中经常使用到的3个关键字synchronized.ReentrantLock.volatile. 一.synchronized 互斥锁,即操作互斥,并发线程过来, ...

  4. PHP访问带密码的Redis

    1. 设置Redis密码,以提供远程登陆打开redis.conf配置文件,找到requirepass,然后修改如下: requirepass yourpassword yourpassword就是re ...

  5. .html(),.text()和.val()的差异总结：

    .html(),.text()和.val()的差异总结: 1.html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的html内容(包括htm ...

  6. PHP中的SESSION机制

    [转] php中cookie和session是我们常用的两个变量了,一个是用户客户端的,一个用在服务器的但他们的区别与工作原理怎么样,下面我们一起来看看cookie和session机制原理吧.   c ...

  7. MATLAB入门教程

    MATLAB入门教程   1．MATLAB的基本知识 1-1.基本运算与函数    在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: ...

  8. AIX UNIX 系统管理、维护与高可用集群建设——数据库结构设计

    在对数据库类应用进行优化的过程中我们了解到一个原则,即思想上要从结构设计抓起,按照下面的顺序: 1.数据库逻辑结构设计和物理设计. 2.数据库对象部署和SQL代码编写. 3.数据库实例性能调整和优化. ...

  9. 【皇甫】☀初识AOP

    新知识,新起点,下面介绍一下aop所要准备架包和各个层 特点: 创建好的各个层: 所需架包: 具体步骤: No.1  搭建分层架构 entity 1 public class User impleme ...

  10. 对jquery分页的升级

    以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下 直接上代码吧 css用了bo ...