js、css可能出现的一个问题：【js得到已设置属性为空】

liusure0

2014-01-08

关注关注

最近在做一些js实例应用，发现了一个奇怪的问题。下面是过程：

①按钮：

js、css可能出现的一个问题：【js得到已设置属性为空】

②点击后
js、css可能出现的一个问题：【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