通过类和ID自定义HTML元素

Question

我正在尝试修改这个项目以显示带颜色的一些日期，但我不知道如何编辑特定元素，比如具有id ="3"的元素，它在id ="March"的div中。到目前为止，在所有尝试中，我只能将id ="3"的所有div着色。

所以我的问题是，如何修改具有id ="3"和id ="March"的元素属性？

- Florin Baciu

---

为什么不展示一下你的尝试，这样我们就可以帮助你 :) - jpmc

Answer 1

为了定位嵌套的 div 元素，请按照以下步骤操作：

<div id="3">
    <div id="March"></div>
</div>

#3 #March {
    color: purple;
}

同时尽量使用合理的变量名称，采用驼峰式命名约定。

- berkobienb

---

使用CSS来进行颜色设置绝对比使用Javascript更好的方案。 - Citrullin

但我需要获取一个JSON文件，然后从中更改各个div的颜色。 - Florin Baciu

我想我需要更多的具体信息。@FlorinBaciu - berkobienb

从服务器获取一个JSON文件，根据这个JSON文件，我需要更改日历上不同div的颜色。@berkobienb - Florin Baciu

Answer 2

只需使用DOM API即可。 在你的情况下：

let march = document.getElementById('March')
let third_of_march = document.getElementById('3')

一个小提示：ID应该是唯一的。DOM API只返回一个元素。在您的用例中，您应该使用类。这将使它更加简单。

let every_third_day = document.getElementsByClassName('3')

你可以简单地遍历所有元素，并执行你想要的操作。

- Citrullin

---

嗨，我根据您的答案编写了以下函数：function colorEvents(){ let march = document.getElementById('March'); let third_of_march = march.getElementById('3'); third_of_march.style.color = "blue"; } 但是我遇到了这个错误：(index):6 Uncaught TypeError: march.getElementById 不是一个函数。 - Florin Baciu

我解决了这个问题。看看我的修改。应该是 document 而不是 march。 - berkobienb