我想根据一周中的几天来调用另一个css类。
<script type="text/javascript">
window.onload = function () {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
if (n =='Tuesday') {
document.getElementById("td").className = "MyClass";
} else {
document.getElementById("td").className = "red";
}
}
</script>
但是这段代码不起作用。有人请帮忙。 这是我的完整代码
<style>
.red {
background-color: #ff0000;
}
.blue {
background-color: #0000ff;
}
.MyClass {
background-color: #b65d36;
}
</style>`
<script type="text/javascript">
document.write('<DIV color id="loading" align="center" style="border: 1px solid #008080; position: fixed; top: 48%; left: 40%;">
<b>Product Service</b> <br />
<I>Loading, Please Wait....</I>
<br><img src="../Images/progressbar.gif" alt="" style="border- style: none; border-width: 0px" /></DIV>');
window.onload = function () {
document.getElementById("loading").style.display = "none";
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
if (n =='Tuesday') {
document.getElementById("td").className = "MyClass";
} else {
document.getElementById("td").className = "red";
}
}
</script>
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
</head><body>
<form id="form2" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>` `
<asp:UpdateProgress ID="UpdateProgress1" runat="server" >
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="../Images/progressbar.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div align="center" id="div_First" style="width: 100%;margin:auto;">
<table cellspacing="0" style="font-family:Lato;" cellpadding="0" width="98%" border="0">
<tr>
<td align="left" colspan="2" class="Header" valign="middle"><b>Report</b> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:0px;">
<table width="100%" style="border: 1px solid #669999;background-color:#FFFF95; color:black;">
<tr>
<td width="33%" align="left" valign="top" >
<table width="100%" >
<tr> <td >Product </td>
<td align="left">
<asp:DropDownList ID="ddl_Product" TabIndex="1" CssClass="txtboxAll" Width="210px" runat="server">
</asp:DropDownList>
<asp:CascadingDropDown ID="CascadingDropDown5" runat="server"
Category="Product" TargetControlID="ddl_Product"
PromptText="[Select Product]" LoadingText="Loading Product..."
ServicePath="~/Services/Productservice.asmx"
ServiceMethod="GetDropDownProduct" Enabled="True">
</asp:CascadingDropDown>
</td>
</tr>
<tr>
<td >Name</td>
<td>
<asp:DropDownList ID="ddl_name" CssClass="txtboxAll" AutoPostBack="true" Width="210px" runat="server" ></asp:DropDownList>
<asp:CascadingDropDown ID="cdd_facility" runat="server" Category="name" TargetControlID="ddl_name" PromptText="[Select Name]" LoadingText="Loading Name..." ServicePath="~/Services/Productservice.asmx" ServiceMethod="GetDropDownname">
</asp:CascadingDropDown>
</td>
</tr>
</tr>
<tr>
<td align="right" colspan="3">
<asp:Button ID="but_submit" runat="server" CssClass="btn5" Text="Search"/> </td>
</tr>
</table>
</form>
</body>
这是我的完整代码。它不起作用。 CSS类MyClass不起作用。
当我在代码上打开控制台时，我看到以下内容：
“未捕获的TypeError：无法设置null的属性'className'”
这条线似乎是问题所在：
document.getElementById("td").className = "MyClass";
您的页面中不存在ID为“td”的内容（因此之前的错误）。我相信你想要这样的东西：
if (n =='Tuesday') {
var arr = document.getElementsByTagName("td");
for(var i=0; i<arr.length; i++)
arr[i].className = "MyClass";
} else {
var arr = document.getElementsByTagName("td");
for(var i=0; i<arr.length; i++)
arr[i].className = "red";
}
否则，创建一个id为“td”的标签