为什么新增的CSS类无效啊?

<!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" lang="zh-CN">
<head>
<style type="text/css">
*{margin:0;padding:0;} table{
margin: auto;
border:1px solid #699;
}
caption{
margin: auto;
padding:.2em;
font-size:1.2em;
font-weight:bold;
}
th{
font-weight:normal;
font-style:italic;
text-align:left;
border:1px dotted #699;
background-color:#9cc;
color:#000;
}
td,th{
width:10em;
padding:.5em;
}
.intro{background:orange;}
.intro1{border:1px solid #000}
</style>
</head>
<body> <table>
<caption class="intro1">Itinerary</caption>
<thead>
<tr>
<th>when</th>
<th>where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Orange">or</abbr></td>
</tr>
<tr>
<td>June 10 th</td>
<td>Seattle , <abbr title="washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="">CA</abbr></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var caption = document.getElementsByTagName("caption");
for(var i=0; i<caption.length; i++){
caption[i].className = " intro";
}
function stripeTables(){
var tables = document.getElementsByTagName("table");
for(var i=0; i<tables.length; i++){
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for(var j=0; j<rows.length; j++){
if(odd == true){
rows[j].style.backgroundColor = "orange";
odd = false;
}
else{
odd = true;
}
}
}
}
stripeTables() function highlightRows(){
var rows = document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++){
rows[i].onmouseover = function(){
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function(){
this.style.fontWeight = "normal";
}
}
}
highlightRows()
</script> </body>
</html>
caption[i].className = " intro";  这里我加了空格了啊?
然后对.intro1 进行样式修改.但是无效啊?

解决方案 »

  1.   

    <caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置。只能有一个！！！！document.getElementsByTagName("caption").className="intro";
      

  2.   


    可以document.getElementsByTagName("caption").className="intro introl";
    css中是可以这样写的。class="class1 class2"
      

  3.   

    <!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" lang="zh-CN">
    <head>
    <style type="text/css">
    *{margin:0;padding:0;} table{
    margin: auto;
    border:1px solid #699;
    }
    caption{
    margin: auto;
    padding:.2em;
    font-size:1.2em;
    font-weight:bold;
    }
    th{
    font-weight:normal;
    font-style:italic;
    text-align:left;
    border:1px dotted #699;
    background-color:#9cc;
    color:#000;
    }
    td,th{
    width:10em;
    padding:.5em;
    }
    .intro{background:orange;}
    .intro1{border:1px solid #000}
    .odd{background:yellow;}
    .title{background:yellow;}
    </style>
    </head>
    <body> <h1>我是标题!</h1> <em>我的重要的!</em> <p>我是对的</p> <table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
    <th>when</th>
    <th>where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>June 9th</td>
    <td>Portland, <abbr title="Orange">or</abbr></td>
    </tr>
    <tr>
    <td>June 10 th</td>
    <td>Seattle , <abbr title="washington">WA</abbr></td>
    </tr>
    <tr>
    <td>June 12th</td>
    <td>Sacramento,<abbr title="">CA</abbr></td>
    </tr>
    </tbody>
    </table>
      <input type="button" onclick="findTextNode();">

    <script type="text/javascript">
    /*    function findTextNode() {
            var ps = document.getElementsByTagName('p');
            for (var index = 0; index < ps.length; index++) {
                alert(ps[index].childNodes[0].nodeType);
                alert(ps[index].childNodes[0].nodeValue);
            }
        } function addClass(element,value){
    if(!element.className){
    element.className = value;
    }
    else{
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
    }
    }
    function title() {
    var titles = document.getElementsByTagName("h1");
    for(var i=0; i<titles.length; i++){
    var elem = getNextElement(titles[i].nextSibling)
    addClass(elem,"title")
    }
    }
    function getNextElement(node){
    if(node.nodeType == 1){
    return node;
    }
    if(node.nextSibling){
    return getNextElement(node.nextSibling);
    }
    }
    title()
    /*
    function getNextElement(node){
    if(node.nodeType == 1){
    return node;
    }
    if(node.nextSibling){
    return getNextElement(node.nextSibling);
    }
    }
    function styleHeaderSiblings(){
    var headers = document.getElementsByTagName("h1");
    for(var i=0; i<headers.length; i++){
    var elem = getNextElement(headers[i].nextSibling);
    addClass(elem,"title");
    }
    }
    styleHeaderSiblings()
    */            var caption = document.getElementsByTagName("caption").className = "intro";
                function stripeTables(){
                    var tables = document.getElementsByTagName("table");
                    for(var i=0; i<tables.length; i++){
                        var odd = false;
                        var rows = tables[i].getElementsByTagName("tr");
                        for(var j=0; j<rows.length; j++){
                            if(odd == true){
                                rows[j].style.backgroundColor = "orange";
                                odd = false;
                            }
                            else{
                                odd = true;
                            }
                        }
                    }
                }
    stripeTables()            function highlightRows(){
                    var rows = document.getElementsByTagName("tr");
                    for(var i=0; i<rows.length; i++){
                        rows[i].onmouseover = function(){
                            this.style.fontWeight = "bold";
                        }
                        rows[i].onmouseout = function(){
                            this.style.fontWeight = "normal";
                        }
                    }
                }
    highlightRows() </script> </body>
    </html>
    2楼的方法我试了.无效啊
      

  4.   

    把我这个原样拷贝过去就好使了
    for(var i=0; i<caption.length; i++){
    caption[i].className = "intro1 intro";
    }