JavaScript学习笔记（一）—细节问题

本篇是《.Net学习笔记——细节问题》（http://www.cnblogs.com/zhouhb/archive/2011/02/17/1957336.html）的姊妹篇，记录JavaScript学习笔记——细节问题！有的时候，细节决定成败！

(1)在ASP.NET中使用JavaScript

<script type="text/javascript">
    function validate()
    {
        if(document.getElementById("<%=txtUserName.ClientID %>").value=="")
        {
            alert("请填写用户名！");
            return false;
        }
        else if(document.getElementById("<%=txtPassword.ClientID %>").value=="")
        {
            alert("请填写密码！");
            return false;
        }      
    }
</script>

     <asp:Button ID="btnLogin" runat="server" Text="登陆" Width="47px" OnClientClick="return validate()"/>

如果用下面的JavaScript代码：

if (document.getElementById("txtUserName").value == "") 
{    alert("请填写用户名！");    
     return false;
}
发现也能运行。但其实这是巧合，txtUserName控件的ClientID恰巧是txtUserName。如果把控件放到内容页中，如：
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
 <asp:Panel ID="Panel1" runat="server">      
 <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

  <asp:Button ID="btnLogin" runat="server" Text="登陆" Width="47px" OnClientClick="return myvalidate();" />
 </asp:Panel>
</asp:Content>
运行，就会报错。这是因为txtUserName控件的ClientID变成了ContentPlaceHolder1_txtUserName，不再是txtUserName。
所以正确的做法是：
document.getElementById("<%=txtUserName.ClientID %>").value

（2）表格隔行变色

    <script type="text/javascript">
        window.onload = function () {
            var oTb = document.getElementById("tbStu");  //获取表格
            for (var i = 0; i < oTb.rows.length; i++) {
                if (i % 2 == 0)
                    oTb.rows[i].className = "trOdd";
            }
        }
    </script>

（3）控制Html对象显示或隐藏

function Change()
{
   var btn=document.getElementById("Button2");
   if(btn.style.display=="")
    btn.style.display="none";
   else
    btn.style.display="";
}

（4）动态样式切换

4.1 使用HTML元素的style属性

    <script type="text/javascript">
    function ChangeBackColor()
    {
        var div=document.getElementById("div1");
        div.innerHTML="changeBackgroundColor";
        div.style.backgroundColor="Green";
    }
    </script>

    //HTML代码

   <div id="div1" onclick="ChangeBackColor();alert('changeBackgroundColor')">
    <p>click me!</p>
    </div>

4.2 使用HTML元素的className属性

    <style type="text/css">
    .backcolor
    {
        background-color:Green;
        font-size:20px;
        color:red;
    }
    </style>

    <script type="text/javascript">
    function ChangeBackColor()
    {
        var div=document.getElementById("div1");
        div.innerHTML="changeBackgroundColor";
        //div.style.backgroundColor="Green";
        div.className="backcolor";
    }
    </script>

  HTML代码同上。