当前位置: 代码迷 >> Java Web开发 >> css无法实现分行显示颜色的有关问题
  详细解决方案

css无法实现分行显示颜色的有关问题

热度:7550   发布时间:2013-02-25 21:13:58.0
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";
}
}
};
  相关解决方案