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

本篇是《.Net学习笔记——细节问题》（/article/5030084.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代码同上。