我正在尝试编写一些动态javascript代码，根据我们所在的月份更改div的背景颜色。例如，如果我们在今天的4月即4月那么更改包含隐藏值的div 4.
下面的代码确实改变了div的背景但是我必须手动更改div的名称才能使用。我希望这会自动发生。我正在寻找指导。如果有人可以帮助谢谢。
到目前为止，我已经编写了这段代码。
<style type=" ">
#content{
width: auto;
height:250px;
border-style:solid;
border-color:#33F;
background: #FFF;
}
</style>
<script>
function change(){
var d = new Date();
var n = d.getMonth();
var e = document.getElementById("april").value;
if (n = e)
{
document.getElementById("content4").style.background = "red";
document.getElementById("content4").style.height = "250px";
}
}
</script>
</head>
<body onload="change()">
<div id="content">
<input hidden type="text" id="january" value="0" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="february" value="1" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="march" value="2" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content4">
<input hidden type="text" id="april" value="3" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="may" value="4" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="june" value="5" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="july" value="6" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="august" value="7" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="september" value="8" />
<h2></h2>
<p>News letter addition one</p>
</div><div id="content">
<input hidden type="text" id="october" value="9" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="november" value="10" />
<h2></h2>
<p>News letter addition one</p>
</div><div id="content">
<input hidden type="text" id="december" value="11" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="may" value="6" />
<h2></h2>
<p>News letter addition one</p>
</div><div id="content">
<input hidden type="text" id="may" value="5" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="may" value="6" />
<h2></h2>
<p>News letter addition one</p>
</div><div id="content">
<input hidden type="text" id="may" value="5" />
<h2></h2>
<p>News letter addition one</p>
</div>
<div id="content">
<input hidden type="text" id="may" value="6" />
<h2></h2>
<p>News letter addition one</p>
</div>
答案 0 :(得分：1)
您可以简化代码和html，只需使用switch语句即可。你需要12个单独的if语句来处理每个div。下面检查月份，并根据它添加红色背景。
<html>
<head>
<style>
.content
{
width: auto;
height: 250px;
border-style: solid;
border-color: #33F;
background: #FFF;
}
</style>
</head>
<body onload="change()">
<div class="content" id="jan">
<h2>January</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="feb">
<h2>February</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="mar">
<h2>March</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="apr">
<h2>April</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="may">
<h2>May</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="jun">
<h2>June</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="jul">
<h2>July</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="aug">
<h2>August</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="sep">
<h2>September</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="oct">
<h2>October</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="nov">
<h2>November</h2>
<p>News letter addition one</p>
</div>
<div class="content" id="dec">
<h2>December</h2>
<p>News letter addition one</p>
</div>
<script>
function change()
{
var d = new Date();
var n = d.getMonth();
switch (n)
{
case 0: document.getElementById("jan").style.background = "red";
break;
case 1: document.getElementById("feb").style.background = "red";
break;
case 2: document.getElementById("mar").style.background = "red";
break;
case 3: document.getElementById("apr").style.background = "red";
break;
case 4: document.getElementById("may").style.background = "red";
break;
case 5: document.getElementById("jun").style.background = "red";
break;
case 6: document.getElementById("jul").style.background = "red";
break;
case 7: document.getElementById("aug").style.background = "red";
break;
case 8: document.getElementById("sep").style.background = "red";
break;
case 9: document.getElementById("oct").style.background = "red";
break;
case 10: document.getElementById("nov").style.background = "red";
break;
case 11: document.getElementById("dec").style.background = "red";
break;
}
}
</script>
</body>
</html>
答案 1 :(得分：0)
试试这个：
function change() {
var month = ['january', 'february', 'march', 'april', ...];
var d = new Date();
var n = d.getMonth();
var currentMonth = month[n];
var hiddenInput = document.getElementById(currentMonth);
var div = hiddenInput.parentNode;
div.style.background = "red";
div.style.height = "250px";
}
// to get the months-names:
var hiddens = document.querySelectorAll('input[hidden]');
var month = Array.prototype.map.call(hiddens, function (a) { return a.id; });
答案 2 :(得分：0)
还有其他更好的方法来实现这一点，这应该在服务器端完成。但就这种情况而言 您可以尝试创建不同月份的CSS并通过javascript更改课程：
var d = new Date();
var n = d.getMonth();
document.getElementById("content").className = n;
在CSS中添加所有月份（仅用于提示）：
.april{
color: red;
}