Question

我有一个脚本可以检查它是什么月份，并尝试根据季节更改背景图像和导航栏颜色。

我让脚本成功找到月份并更改背景，但我甚至不知道从哪里开始更改导航栏。我尝试过getElementByClassName并试图直接指向这些元素（虽然我甚至不知道该怎么做）并且似乎都没有用。

我试图修改的css元素（所有＆＃34; backgroundColor＆＃34;）是：

ul
li a
li a:hover:not(.active)

和

.active

我在编码方面真的是一个初学者（这解释了为什么我使用html列表构建了我的导航栏），尤其是javascript，而我对文档对象模型的读数让我迷失了方向。任何帮助表示赞赏！

编辑：根据要求，这里是有问题的代码我试图修改并且脚本试图修改它

HTML：

<ul>
    <li><a href="index.html">home</a></li>
    <li><a href="music.html">music</a></li>
    <li><a href="art.html">art</a></li>
    <li><a href="games.html">games</a></li>
    <li><a href="hobbies.html">other hobbies</a></li>
    <li><a class=active href="bio.html">bio</a></li>
    <li><a href="links.html">links</a></li>
    <li style="float:right"><a class=active href=#top>top</a></li>
</ul>

JS：

var d = new Date();
var m = d.getMonth();
var b = "";
var c1 = "";
var c2 = "";
var c3 = "";

if (m<=1 || m==11) {
    b = "webbgw.png";
    c1 = "#b5e0fe";
    c2 = "#a5dafe";
    c3 = "#88cefd";
}
else if (m>=2 && m<=4) {
    b = "webbgsp.png";
    c1 = "#ade8ad";
    c2 = "#9be49b";
    c3 = "#7adb7a";
}
else if (m>=5 && m<=7) {
    b = "webbgsm.png";
    c1 = "#ff90bd";
    c2 = "#ff72a8";
    c3 = "#ff9382";
}
else if (m>=8 && m<=10) {
    b = "webbga.png";
    c1 = "#ffb420";
    c2 = "#efa507";
    c3 = "#ca8802";
}
else {
    b = "webbgerr.png";
    c1 = "#b9b9b9";
    c2 = "#a9a9a9";
    c3 = "#8c8c8c";
}

document.body.background = b;
document.ul.style.backgroundColor = c1;
document.li.a.hover.not(active).backgroundColor = c2;
document.getElementByClassName("active").backgroundColor = c3;

像我说的那样，我甚至不知道从哪里开始将脚本指向我想要改变的东西，所以我基本上100％确定最后3个功能是错误的。我只是放入了我理解的东西，编辑并没有因为写作而对我大喊大叫。

Answer 1

最简单的方法是在CSS文件中放入尽可能多的代码，只需改变一件事，比如<body>中的CSS类来反映季节：

const season = 'winter'; // or whatever logic you have
document.querySelector('body').classList.add('season-' + season);

现在，在CSS文件中，您可以使用该父选择器为所有相关祖先添加颜色：

.winter ul,
.winter li a,
.winter li a:hover:not(.active) {
  background-color: silver;
}

在javascript中更改特定元素的颜色方案？

1 个答案: