css无法实现分行显示颜色的有关问题
日期：2014-05-17 浏览次数：20591 次
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>
上面是测试分行显示颜色的界面，为什么样式表无法显示，有什么错误？？？？
------解决方案--------------------
<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";
}
}
};
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
