js显示隐藏

<!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>

时间: 2024-10-22 17:03:16

js显示隐藏的相关文章

js显示隐藏层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

vue.js显示隐藏

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>v-if.v-else.v-show</title>  <script src="../js/vue.js"></script>  <!--copy from http://vuejs.org.cn/guid

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

在测试过程中,有些输入框是隐藏的,如果直接对他进行赋值,会找不到这个输入框,从而导致脚本运行失败. 例如下面的这个密码输入框: 登录密码输入框分为两个input,下面的是提示的,上面的才是真正存下来的密码输入框,两个input是联动的,默认上面的输入框是隐藏的,如果直接赋值是找不到这个input的,所以就要把input的display属性从none变为block来显示它然后给他赋值,或者直接给他加一个value属性来赋值. 一.通过js更改display属性来显示input js="var p=

JS 显示隐藏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 /*display: none;*/ 12 }

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

<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <style> body,input{font:menu} </style> </head> <body> <form method="POST" action="addcheck.asp" name="forms&

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

想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.  1.    通过纯CSS实现. 该方法最简单,最粗暴. 这是部分HTML代码. <div class="myfriends" >     我的好友     <div class="myfriendsList" >         <ul>        

js和jquery实现显示隐藏

(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-task">点击按钮</a></h2> <label class="field-name float-left label-w-80" id="thediv">实现显示隐藏部分</label> js实现: fun

js 事件点击 显示 隐藏

1 <div style="position:absolute;left:40%;top:10%;border-style:dotted"> 2 <img src="zgl.jpg"/><br/> 3 <center> 4 <input type="button" value="隐藏"/> 5      6 <input type="button&qu

JS 监听浏览器标签页显示隐藏

JS 监听浏览器标签页显示隐藏 API document.hidden 判断页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 document.visibilityState (只读属性), 返回document的可见性,4个值: hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' visible:此页面在前景标签页中,并且窗口没有最小化 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 tru