50 分，帮忙看看这代码为什么把元素样式写在css中就出现JavaScript错误！

这个是修改后就不能运行的，和上面的不同我用红字标出来了！
<!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>
<title>Div</title>
<script type='text/javascript'></script>
<style type="text/css"> 
body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
background="../src/back.gif"; 
font-size:12px;
  } 
#briefInfo{
width:160px; height:90px; background-color:gray;overflow:hidden;
}
</style> 
</head>
<body>
<input type="button" onclick='showTable(this)' value='收缩'/>
<div id="divC" style="width:80px;height:20px;background-color:Gray;margin:0px 0px 0px 0px" onclick="showTable(this);">
    <div id="divCt" style="border:0;float:left; clear:left">Expand</div>
    <div id="divCp"  style="border:0;float:right;clear:right;background-color:Blue;background-image:url(navExpandArrow.gif);background-repeat:no-repeat;height:20px;width:30px;background-position:center"></div>
</div>
<div id="briefInfo">
Delphi designs, engineers and manufactures a 
wide variety of components, integrated systems 
and modules on a worldwide basis. 
</div>
<div style="width:160px;height:auto;background-color:#2FC5B2">
Delphi designs, engineers and manufactures a 
wide variety of components, integrated systems 
and modules on a worldwide basis. </div>
<script type="text/javascript"> 
var s;
var div=document.getElementById("briefInfo");
var divCt=document.getElementById("divCt");
div.sign=false;
var button=document.getElementsByTagName("input")[0];
function showTable(){
//var divHeight=parseInt(div.style.height);
if(div.sign==false){
    div.style.height=parseInt(div.style.height)-5+"px";
    if(parseInt(div.style.height)<=0){
        div.style.height="0px";
        clearTimeout(s);
        button.value='展开';
        divCt.innerHTML="Expand";
        div.sign=true;
        return;
    }
}else{
    div.style.height=parseInt(div.style.height)+5+"px";
    if(parseInt(div.style.height)>=90){
        div.style.height="90px";
        clearTimeout(s);
        button.value='收缩';
        divCt.innerHTML="Close";
        div.sign=false;
        return;
    }
}
    s=setTimeout(showTable,20);
}
</script> 
</body>
</html>

解决方案 »

  1.   

    可以啊！
    <!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>
    <title>Div</title>
    <script type='text/javascript'></script>
    <style type="text/css"> 
    body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    background="../src/back.gif"; 
    font-size:12px;
      } 
    #briefInfo{ 
    width:160px; height:90px; background-color:gray;overflow:hidden; 
    } 
    </style> 
    </head>
    <body>
    <input type="button" onclick='showTable(this)' value='收缩'/>
    <div id="divC" style="width:80px;height:20px;background-color:Gray;margin:0px 0px 0px 0px" onclick="showTable(this);">
        <div id="divCt" style="border:0;float:left; clear:left">Expand</div>
        <div id="divCp"  style="border:0;float:right;clear:right;background-color:Blue;background-image:url(navExpandArrow.gif);background-repeat:no-repeat;height:20px;width:30px;background-position:center"></div>
    </div>
    <div id="briefInfo" style="width:160px; height:90px; background-color:gray;overflow:hidden;" >
    Delphi designs, engineers and manufactures a 
    wide variety of components, integrated systems 
    and modules on a worldwide basis. 
    </div>
    <div id="briefInfo"> <!-- 
    <div style="width:160px;height:auto;background-color:#2FC5B2"> -->
    Delphi designs, engineers and manufactures a 
    wide variety of components, integrated systems 
    and modules on a worldwide basis. </div>
    <script type="text/javascript"> 
    var s;
    var div=document.getElementById("briefInfo");
    var divCt=document.getElementById("divCt");
    div.sign=false;
    var button=document.getElementsByTagName("input")[0];
    function showTable(){
    //var divHeight=parseInt(div.style.height);
    if(div.sign==false){
        div.style.height=parseInt(div.style.height)-5+"px";
        if(parseInt(div.style.height)<=0){
            div.style.height="0px";
            clearTimeout(s);
            button.value='展开';
            divCt.innerHTML="Expand";
            div.sign=true;
            return;
        }
    }else{
        div.style.height=parseInt(div.style.height)+5+"px";
        if(parseInt(div.style.height)>=90){
            div.style.height="90px";
            clearTimeout(s);
            button.value='收缩';
            divCt.innerHTML="Close";
            div.sign=false;
            return;
        }
    }
        s=setTimeout(showTable,20);
    }
    </script> 
    </body>
    </html>
      

  2.   

    background="../src/back.gif";  改成 background:url(../src/back.gif); 
    这句改成：div.style.height = parseInt(div.currentStyle.height)-5 + "px";
      

  3.   

    js获取css样式时，如果CSS写在tag的属性中,js可以获取原来的值,并可以在原值的基础上继续动算.如果css移到外部(不在属性中).获取原值（原来的样式定义）比较困难或不可能
      

  4.   

    你把style的内容放到CSS后. div.style.height 就为空了.所以就出错了.