js控制div属性隐藏方法

原文详解：js控制div属性隐藏方法
如题：编写html时如何用js控制div的显示和隐藏。

假定页面展示内容如下：
1、点击触发事件：

<div><button class="showDiv" onclick="showDiv()">点击我显示div</button>
</div>

将要点击隐藏的内容放入其他div
2、隐藏区块

<div style="display: none;" id="hiddenButton"><button>我是隐藏模块</button>
</div>

css样式，style=“display:none”，none属性将其隐藏，

3、点击触发函数

function showDiv(){var div=document.getElementById("hiddenButton");div.style.display='block';};

如上用js控制其属性，由none到block的转换。便完成了需求。！！！

下附完整js，css，html，模板事例。

<html代码模板>
<div><button class="but" onclick="but()">点击我查询消息</button>
</div>
<div style="display: none;" id="divdisplay"><div class="mask" style="display: block;"></div><div style="top: 132.5px; left: 569.5px; display: block;" class="modal-login"><div class="modal-login-tit"><h2>请关注公众号进行支付</h2>                   <i class="icon icon-close"></i>                  </a><a href="javascript:;" class="close" shape="rect"><div class="close"  onclick="closeon()" style="color: red;">关闭</div>    </a>              </div><div class="login-box"><div class="login-bd"><div class="login-code" style="display: block;"><div id="J-login-code-con" class="login-code-con" style="display: block;"><div class="login-code-main"><div class="code-pic" style="left: 80px;"><img id="J-qrImg" src="img/wchat.jpg"><div id="J-code-error-mask" style="display: block;" class="code-error-mask"></div></div></div></div>请关注我的公众号||请关注我的公众号||请关注我的公众号||</div></div><div class="login-ft"><p>1、你好用户，请关注我的公众号，进行支付</p><p>2、weipay提供网络支持</p>                        </div></div>
</div>
</div>
<script type="text/javascript" src="indeed.js" ></script>
<css代码模板>
div, form, img, ul, ol, li, dl, dt, dd {margin: 0;padding: 0;border: 0;
}
.but{background-color: greenyellow;margin-left:100px ;margin-top:100px ;width: 120px;height: 50px;}
.mask {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: #000;opacity: .5;z-index: 16000;
}
.modal-login {position: absolute;top: 0;left: 0;width: 380px;z-index: 19000;font-size: 14px;-wekbit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
.modal-login .modal-login-tit {height: 34px;line-height: 34px;padding: 0 20px;background: #f8f8f8;position: relative;
}
.modal-login .modal-login-tit .close {position: absolute;top: 0;right: 0;width: 34px;height: 34px;text-align: center;line-height: 34px;
}
.modal-login a {color: #333;
}
.icon {font-family: "icon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.login-box {background: #fff;width: 380px;
}
.login-box .login-hd {height: 78px;line-height: 78px;padding: 0 30px;
}
.login-box .login-hd .login-hd-code {margin-right: 60px;
}.login-box .login-hd li {float: left;width: 130px;text-align: center;position: relative;
}
.login-box .login-hd li {float: left;width: 130px;text-align: center;position: relative;
}
.modal-login .login-box .login-hd {height: 48px;line-height: 48px;
}.login-box .login-hd {height: 78px;line-height: 78px;padding: 0 30px;
}
.login-code .login-code-loading {text-align: center;width: 100%;height: 40px;line-height: 40px;padding: 115px 0;
}
.login-code .code-pic {position: absolute;top: 20px;left: 80px;width: 160px;height: 160px;border: 1px solid #efefef;
}
.login-code .code-error-mask {position: absolute;top: 0;left: 0;right: 0;bottom: 0;/* background: #000;*/opacity: .65;z-index: 10;display: none;
}
.login-code .login-code-main {height: 200px;position: relative;
}
.login-code .login-code-con {height: 270px;padding: 0 30px;
}.modal-login *, .modal-login *:before, .modal-login *:after {-wekbit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
element.style {top: 114.5px;left: 371px;
}.modal-login {position: absolute;top: 0;left: 0;width: 380px;z-index: 19000;font-size: 14px;-wekbit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
/*底部样式*/
.login-ft {padding: 10px 20px 15px;font-size: 15px;color: blue;border-top: 1px solid #efefef;
}
/*内置照片缩写*/
.login-code .code-pic img {display: block;width: 158px;height: 158px;
}.icon {font-family: "icon"!important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
<js模板>
function but(){ var div=document.getElementById("divdisplay");div.style.display='block';
}
function closeon(){var div=document.getElementById("divdisplay");div.style.display='none';
}

面向开发需求，记录学习之路。

js控制div属性隐藏方法相关推荐

html判断隐藏显示,js 判断DIV是否隐藏的方法
js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅.那么飞鸟慕鱼博客就来说一说,如何判断d ...
js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...
JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
js DOM Element属性和方法整理
js DOM Element属性和方法整理节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
html li点隐藏,js控制li的隐藏和显示实例代码
html页面全部({$count}) 钢琴谱({$count_pu}) 钢琴曲({$count_qu}) 钢琴专辑({$count_zhuanji}) 钢琴全集({$count_quanji}) 钢 ...
JS变量、属性、方法、函数的相同点和区别
JS变量.属性.方法.函数的相同点和区别 1. 变量和属性的相同点变量和属性都是来存储数据的 2. 变量和属性的区别变量需要单独声明并赋值,使用的时候直接写变量名,单独存在:属性是在对象里面,不需 ...
原生js设置div隐藏或者显示_用js控制div的显示与隐藏
功能介绍:要实现一个div的显示与隐藏,方法有很多,这里记录下一个简单的js效果,用js来控制div的显示与隐藏,示例代码如下: js显示隐藏层 function showdiv(targetid,o ...
关于js控制元素的隐藏和显示
jsp <div class="row" style="display:none" id="amount"><EF:EFI ...
基于js对象,操作属性、方法详解
一,概述在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

js控制div属性隐藏方法

js控制div属性隐藏方法相关推荐

最新文章

热门文章