为何这段代码不起作用？

用VS 2008调试如下代码，怎么不起作用呢？q1的背景色没变成#004488，empty中也没加入新的内容，用多种浏览器测试都是如此，这是为什么呢？代码过时啦？default.aspx<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
    <title>Test</title>
    <script type='text/javascript'> 
      <!--
      //alert("hi!");
      var q1=document.getElementById("q1");
      q1.className="q1";
      var empty=document.getElementById("empty");
      addNote(empty,"reader of");
      addNote(empty,"Ajax in Action!");
      
      function addNote(el,text){
      var childEl=document.createElement("div");
      el.appendChild(childEl);
      var txtNote=document.createTextNode(text);
      childEl.appendChild(txtNote);
      }
      -->
     </script>
     <link rel="Stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="q1">
     AAA
    </div>
    <div id="empty"></div>
    </form>
</body>
</html>
main.css.q1
{ background-color:#004488;
}

解决方案 »

  1.   

    建议楼主把css的文件引入放到js方法之前，因为js是顺序执行的，一般先读css文件再给标签加样式，还有我建议楼主在firebug下看看class = ql的标签有没有内容
      

  2.   

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
        <title>Test</title>
        <script type='text/javascript'> 
          <!--
          //alert("hi!");
          window.onload=function(){
              var q1=document.getElementById("q1");
              q1.className="q1";
              var empty=document.getElementById("empty");
              addNote(empty,"reader of");
              addNote(empty,"Ajax in Action!");
              
              function addNote(el,text){
              var childEl=document.createElement("div");
              el.appendChild(childEl);
              var txtNote=document.createTextNode(text);
              childEl.appendChild(txtNote);
              }
          }
          -->
         </script>
         <link rel="Stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="q1">
         AAA
        </div>
        <div id="empty"></div>
        </form>
    </body>
    </html>
      

  3.   

    or:
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
        <title>Test</title>
         <link rel="Stylesheet" type="text/css" href="css/main.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="q1">
         AAA
        </div>
        <div id="empty"></div>
        </form>
        <script type='text/javascript'> 
          <!--
          //alert("hi!");
          var q1=document.getElementById("q1");
          q1.className="q1";
          var empty=document.getElementById("empty");
          addNote(empty,"reader of");
          addNote(empty,"Ajax in Action!");
          
          function addNote(el,text){
          var childEl=document.createElement("div");
          el.appendChild(childEl);
          var txtNote=document.createTextNode(text);
          childEl.appendChild(txtNote);
          }
          -->
         </script>
    </body>
    </html>
      

  4.   

    要么你把js放到</body>标签后面去，要么你在前面增加window.onload=;你代码执行的时候，hmtl都还没加载完，Q1根本就还没生产，怎么起作用啊，常识问题啊
      

  5.   

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
        <title>Test</title>
         <link rel="Stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="q1">
         AAA
        </div>
        <div id="empty"></div>
        </form>
        <script type='text/javascript'> 
          <!--
          //alert("hi!");
          var q1=document.getElementById("q1");
          q1.className="q1";
          var empty=document.getElementById("empty");
          addNote(empty,"reader of");
          addNote(empty,"Ajax in Action!");
          
          function addNote(el,text){
          var childEl=document.createElement("div");
          el.appendChild(childEl);
          var txtNote=document.createTextNode(text);
          childEl.appendChild(txtNote);
          }
          -->
         </script>
    </body>
    </html>
      

  6.   

    你把代码放到window.onload里。在执行的时候q1还没加载
      

  7.   

    补充：1楼说的不尽然，css的文件放在后面也可以！
    谢谢6楼，8楼，结贴后才看到你们的回帖，呵呵！