<!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. H5 FormData对象的使用

    XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  2. web api与webservice(转）

    webservice走HTTP协议和80端口而你说的api,用的协议和端口,是根据开发人员定义的 这么说吧,api类似于cs架构,需要同时开发客户端API和服务器端程序而WebService则类似于b ...

  3. JMeter学习-027-JMeter参数文件（脚本分发）路径问题：jmeter.threads.JMeterThread: Test failed! java.lang.IllegalArgumentException: File distributed.csv must exist and be readable解决方法

    前些天,在进行分布式参数化测试的时候,出现了如题所示的错误报错信息.此文,针对此做一个简略的重现及分析说明. JMX脚本线程组参数配置如下所示: 参数文件路径配置如下所示: 执行JMX脚本后,服务器对 ...

  4. JMeter学习-025-JMeter 命令行（非GUI）模式详解（三）-测试图形化 HTML 报表（dashboard）生成

    闲话少述,接 上文 继续... 6.生成测试报表 生成测试报表前,需要先生成性能测试结果 jtl 或 csv 文件,用于测试结果的生成. jmeter -n -t JMeter分布式测试示例.jmx ...

  5. gmc银联接口开发demo

    1.接口文档 1.1 无gmc界面接口 (dll/ocx) dll调用(posinf.dll)函数名为:int bankall (char * request,char *response),其中第一 ...

  6. C# LINQ

    Sorting: OrderBy ThenBy OrderByDescending ThenByDescending Reverse public IEnumerable<Customer> ...

  7. bindOrg函数

    @param params {userId 用户ID, orgcode 机构代码, defaultOrgcode 默认机构代码, defaultOcid 默认银行代码, flag 1=取所有中心(默认 ...

  8. 【搬运】systemctl 命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...

  9. ubuntu14.04下安装python3.4.2

    1. python安装包的下载地址:https://www.python.org/downloads/ 我的python安装包下载地址:https://www.python.org/ftp/pytho ...

  10. Spring入门

    Spring可以做很多事情,它为企业级的开发提供了丰富的功能,但是这些功能的底层实现都依赖于它的两个核心特性, 也就是依赖注入(dependency injection, DI)和面向切面编程(asp ...