onclick控制元素显示与隐藏时,点击第一次无反应的原因

代码如下:

<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是隐藏的,那么显示出来,否则,就隐藏.但是当我点击第一次的时候,它总是没有反应,必须点击第二次的时候,才能正常工作.

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

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

function getStyle(obj,attr){if(obj.currentStyle){//IEreturn obj.currentStyle[attr];}else{//ffreturn getComputedStyle(obj,false)[attr];}}

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

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

转载于:https://www.cnblogs.com/zhangfengyang/p/4682165.html

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

点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
使用v-show v-if 设置元素显示和隐藏
一丶一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
html行内元素隐藏,使用v-show v-if 设置元素显示和隐藏
一丶一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
angularjs ng-click传参控制ng-repeat元素显示与隐藏
ng-click传参控制ng-repeat元素显示与隐藏说明: 1.使用ng-repeat显示参数 2.通过ng-click按钮显示或隐藏内容.通过添加shows和id两个参数控制显示. <! ...
vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else
v-show与v-if作用一.v-show 控制元素显示, 通过display: none控制显示语法: v-show="变量或者表达式" 如果变量或者表达式为true, 会显 ...
HTML元素显示与隐藏
在WEB开发中,前台HTML中经常需要控制元素的隐藏与显示,我们最为最常见是二级导航栏(通过鼠标的移动来触发onmouseover,onmouseout事件来实现二级菜单的显示与隐藏)二级菜单的显示与 ...
元素显示和隐藏的过渡效果
开端做css效果时,会有这种情况鼠标移动上去,元素显示出来,鼠标移走,元素隐藏如果仅仅是这个效果的话,实现起来比较简单,如下 <head><style>.main {he ...
Vue.js学习之路（五）控制页面元素显示和隐藏
在HTML中国我们通常是直接使用display的属性值,来控制元素的显示与隐藏,在vue中就主要通过两种方式v-if和v-show 两者都是通过对引号中的值或者表达式进行true或false进行判断实 ...
使用vue控制元素显示隐藏
HTML代码: <div title="意向价格" v-if="showPrise"></div><div title=" ...

onclick控制元素显示与隐藏时,点击第一次无反应的原因

代码如下:

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

最新文章

热门文章