*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

代码如下:

<style> 
#div1 {width: 100px; height: 100px; border: 1px solid red;}
#p1 {height: 30px; background: green; display: none;}
<style>
<div id="div1">div1</div>
<p id="p1">p1</p>

var oDiv = document.getElementById('div1');
var oP = document.getElementById('p1');
oDiv.onclick = function(){
if(oP.style.display=='none'){
oP.style.display='block';
}else{
oP.style.display='none';
}
}

上面的代码想要实现的效果是,当我点击DIV的时候,如果ul是隐藏的,那么显示出来,否则,就隐藏.但是当我点击第一次的时候,它总是没有反应,必须点击第二次的时候,才能正常工作.

这是因为第一次点击的时候,虽然pCSS设置为display:none;但是用if(oP.display==='none')并无法获取到display的属性值.只有当我们把display:'none';写在行间样式的时候,才会被识别.

解决办法就是用一个方法,去获取计算过后的样式,也就是确切的属性

function getStyle(obj,attr){
if(obj.currentStyle){//IE
return obj.currentStyle[attr];
}else{//ff
return getComputedStyle(obj,false)[attr];
}
}

这样上面的效果代码应该改为:

 oDiv.onclick=function(){
if(getStyle(oP,'display')==='none')
oP.style.display='block';
else
oP.style.display='none';
}

onclick控制元素显示与隐藏时,点击第一次无反应的原因的更多相关文章

  1. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  2. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  4. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  5. jq无法获取ng-repeat元素,如何控制ng-repeat元素显示与隐藏?

    之前都是在做微信小程序的页面,最近做一些html页面,页面也没什么效果,就弄了几个点击事件,控制一些元素的显示与隐藏.后面用angular来写这些页面,然后就遇到了问题,就是用ng-repeat生成的 ...

  6. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  7. 微信小程序 —— 动态决定页面元素显示或隐藏的技巧

    在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’ ...

  8. 安卓(Android )软键盘的控制(显示和隐藏)

    Activity 启动时软键盘默认状态 在清单文件(manifest .xml)中可以通过在 Activity 标签中增加属性控制软键盘的默认状态: android:windowSoftInputMo ...

  9. js控制div显示与隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. cocos2d-x lua table与json的转换

    cocos2d-x lua table与json的转换 version: cocos2d-x 3.6 1.引入json库 require("src/cocos/cocos2d/json&qu ...

  2. Linux文件与目录管理之ls的使用

    来源:鸟哥的私房菜 查看文件与目录 ls ls [-aAdfFhilnrRSt] 目录名 ls [--color={never,auto,always}] ls [--full-time] 目录名 选 ...

  3. Hibernate悲观锁/乐观锁

    如果需要保证数据访问的排它性,则需对目标数据加"锁",使其无法被其它程序修改 一,悲观锁 对数据被外界(包括本系统当前的其它事务和来自外部系统的事务处理)修改持保守态度,通过数据库 ...

  4. Sherlock and The Beast

    Sherlock Holmes suspects his archenemy, Professor Moriarty, is once again plotting something diaboli ...

  5. 修改ie版本的注册表webbroswer

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Exp ...

  6. asp.net 文件压缩zip下载

     今天分享下昨天做的一个东西 asp.net 的文件  zip 批量下载,首先你需要去 到http://dotnetzip.codeplex.com这个站点下载zip 的包,在里面找到 Ionic.Z ...

  7. Java Concurrency - Phaser, Controlling phase change in concurrent phased tasks

    The Phaser class provides a method that is executed each time the phaser changes the phase. It's the ...

  8. WDatePicker 屏蔽onchange事件的解决办法

    受下面文章的启发,使用DatePicker自带的年月日相关的change事件,可以“勉强”实现input控件的onchange(),直接上代码: 1.第一种方式:利用DatePicker提供的年.月. ...

  9. g++ 编译和链接(转)

    传统意义上的编译程序分两步走 —— 编译和链接: 1.编译(compile):指用编译器(compiler)将源代码(source code)生成二进制目标文件(object file),在Windo ...

  10. Oracle 12c Dataguard 数据库恢复

    http://allthingsoracle.com/rolling-forward-a-physical-standby-database-using-the-recover-command/ 当主 ...