css无法实现分行显示颜色的问题
<head>
<style type="text/css">
lay2.01{
background-color:#CCFF00; border:thick
}
lay2.02{
background-color:#66FF99; border:thick
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function getStretchDraw(){
var subject=document.getElementById("lay1")
if(subject.innerText=="+"){
lay2.style.display="block";
subject.innerHTML="-";
}else{
lay2.style.display="none";
subject.innerText="+";
}
}
</script>
</head>
<body>
<span id="lay1" style="border:thinridge;cursor:hand" onclick="getStretchDraw()">-</span>list1<br>
<ul id="lay2">
<li class="01">语文</li>
<li class="02">数学</li>
<li class="01">英语</li>
<li class="02">自渊</li>
<li class="01">化学</li>
<li class="02">生物</li>
</ul>
list2
</body>
</html>
上面是测试分行显示颜色的界面，为什么样式表无法显示，有什么错误？？？？
[解决办法]
- HTML code
<head><style type="text/css">#lay2 .s01 { background-color: #CCFF00; border: thick;}#lay2 .s02 { background-color: #66FF99; border: thick;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript"> function getStretchDraw() { var subject = document.getElementById("lay1") if (subject.innerText == "+") { lay2.style.display = "block"; subject.innerHTML = "-"; } else { lay2.style.display = "none"; subject.innerText = "+"; } }</script></head><body> <span id="lay1" style="border: thinridge; cursor: hand" onclick="getStretchDraw()">-</span>list1 <br> <ul id="lay2"> <li class="s01">语文</li> <li class="s02">数学</li> <li class="s01">英语</li> <li class="s02">自渊</li> <li class="s01">化学</li> <li class="s02">生物</li> </ul> list2</body></html>
[解决办法]
window.onload = function() {
var oDiv = document.getElementById("lay2");
var oP = oDiv.getElementsByTagName("li");
var color = "";
var i = 0;
for (i = 1; i <= oP.length-1; i++) {
if (i % 2 == 0)
{
oP[i].style.backgroundColor="red";
}
else
{
oP[i].style.backgroundColor= "blue";
}
}
};