最近在做一些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> <style> *{margin:0; padding:0;} #outer{ margin:50px auto; width:70px;} #button1{ padding:5px 8px; cursor:pointer;} #inner{ border:1px solid blue; border-radius:5px; display:none; font-family:"新宋体"; font-size: 12px;} #inner li{ padding:5px 8px; border-bottom:1px solid blue; list-style-type:none; display:inline-block; cursor:pointer; vertical-align:top; width:52px;} #inner li.last{border-bottom:0px;} #inner li a{text-decoration:none;} #inner li:hover{background:#afafaf;} </style> <script> window.onload = function () { oButton=document.getElementById("button1");//按钮 oAppend=document.getElementById("inner");//按钮下的蓝色边框区域。 oButton.onclick=function() { switchState(); } var oClose=document.getElementById("last"); oClose.onclick=function() { switchState(); } } var oButton; var oAppend; var switchState = function()//①当蓝色区域未显示时使其显示、②当蓝色区域显示时使其消失。 { //alert("PRE: [display] = "+oAppend.style["display"]); oAppend.style["display"]= (oAppend.style["display"] == "none"?"block":"none"); //alert("NOW: [display] = "+oAppend.style["display"]); } </script> <body> <div id="outer"> <button id="button1">输入法</button> <ul id="inner"> <li><a href="javascript:void(0);">拼音</a></li> <li><a href="javascript:void(0);">字母</a></li> <li id="last"><a href="javascript:;">关闭</a></li> </ul> </div> </body> </html>
--------
可是,当我运行时却发现第一次点击按钮时,蓝色区域并不会弹出来,而后的点击才有效。这是为什么呢?
----于是在上述代码中我将【oAppend.style["display"](即蓝色区域的display属性)】输出,发现第一次点击时,程序运行到了switchState()方法。但是display属性为null。
-------
经过查询,原来外部样式表与内页样式的属性值虽然已经设置,但是js的方法不能直接得到已设置属性的值,即显示为null。而只能得到行内样式中的属性值。
------
解决方法:①将switchState()的判断顺序改变一下->
var switchState = function() { //alert("PRE: [display] = "+oAppend.style["display"]); oAppend.style["display"]= (oAppend.style["display"] == "block"?"none":"block"); //alert("NOW: [display] = "+oAppend.style["display"]); }
这样第一次点击时就先判断显示,若未显示就将其显示。
② 在对应元素的标签中嵌入【style="display:none"】
这样第一次点击时判断语句就能得到oAppend.style["display"]的值为【“none”】而不是【null】了。
相关推荐
js控制css属性对照表 免分数下载 无私分享
最近在做项目的时候遇到一个问题,需要获取一个动态预览的图片的地址,这其实不是什么问题,主要是该图片的路径是写在css的background-img属性中的,于是决定要用js获取它的url中的内容,下面给大家分享解决的方法,...
javaScript属性与CSS属性对照表,一般来说javascript与css的属性只要稍微改动一下就可以用了。
CSS与JS属性对照表,CSS 属性对照表是 js 初学者必备的基础知识.CSS与JS紧密配合,为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性CSS与JS紧密配合
在网页制作中,我们知道有一个input ="hidden"的属性,顾名思义它就是隐藏在网页中的的一个元素,并不在网页中显示出来。 那么它的作用是什么呢.作过cgi,asp,php,jsp等的朋友都知道有些时候我们要给用户一...
可用于JavaScript和Css这种前台技术,主要是学习他们,能帮助我们解决常用的样式和Js代码。
html css js网页设计CSS 要点: 样式化页面布局: 使用 CSS 来设计页面的布局,包括定位、盒模型、布局...兼容性和浏览器差异: 不同浏览器对 CSS 属性的解释和渲染方式可能有所不同,需要考虑到浏览器兼容性问题。
CSS属性在Javascript中对应表
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计...下面对新教程作一个简单的介绍: 本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇,教程会陆续发布,在时间跨度上有点大,希望大家谅解。
css和js标签style属性对照
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片。不过今天又仔细研究了一下css3中的blur...
如png透明问题在IE5、IE6下无法显示出其效果,我们可能会使用CSS hack或者引入外部JavaScript来实现。譬如前面我提到过用pngfix的那个方法就是调用外部JavaScript来解决在IE5、IE6下png透明问题。当然还有更多的方法...
原生javascript实现css属性的set和get
一个CSS+JS的菜单DEMO,支持二级菜单透明、阴影,各级菜单项的属性设置.
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计...下面对新教程作一个简单的介绍: 本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇,教程会陆续发布,在时间跨度上有点大,希望大家谅解。
CSS和JavaScript标签style属性对照表
js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点。getStyle(obj,attr) 调用方法说明:obj为对像,attr为属性名必须兼容js中的写法(可以参考:JS可以控制样式的名称
JavaScript CSS Style属性对照表
JS中的CSS_Style属性标签对照表 css css_styleJS中的CSS_Style属性标签对照表 css css_styleJS中的CSS_Style属性标签对照表 css css_styleJS中的CSS_Style属性标签对照表 css css_styleJS中的CSS_Style属性标签对照...
CSS Reference: 一个最流行CSS属性的可视化指南