javascript - 如何通过JavaScript修改伪类元素的border-bottom颜色？

Question

我正在尝试将其中一个元素的边框颜色更改为红色。

var monDaynum = 30;
var nowDay = 3;

var el = document.getElementById('calendar');

for(var i = 1; i <= monDaynum; i++) {
    var subContent = document.createElement("div");
    subContent.className = "canChoose";
    if(nowDay === i){
        subContent.style.borderBottomColor = "red" // doesn't work
    } else {

    }
    if(i == nowDay){
        subContent.classList.add("today");
    }
    subContent.innerHTML = i;
    el.appendChild(subContent);
}

.canChoose {
  width: 50px;
  display: inline-block;
  padding: 5px;
  text-align: center;
}
.calendar-content .canChoose:after {
    width: 20px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 8px solid #5A8C19; /*Change the color here*/
    border-radius: 10px;
    content: "";
    display: block;
}

<div id="calendar" class="calendar-content">

</div>

我尝试用 JavaScript 代码更改，但失败了

Answer 1

你非常接近。您不能通过直接操作元素的样式来更改它，因为样式应用于伪类。但是，您可以像现在一样添加一个类。

您仍然需要的是具有附加类的元素的 CSS 声明。

var monDaynum = 30;
var nowDay = 3;

var el = document.getElementById('calendar');

for(var i = 1; i <= monDaynum; i++) {

    var subContent = document.createElement("div");
    subContent.className = "canChoose";

    if(i == nowDay){
        subContent.classList.add("today");
    }
    subContent.innerHTML = i;
    el.appendChild(subContent);
}

.canChoose {
  width: 13%;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px;
  text-align: center;
}
.calendar-content .canChoose:after {
    width: 20px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 8px solid #5A8C19; /*Change the color here*/
    border-radius: 10px;
    content: "";
    display: block;
}

.calendar-content .canChoose.today:after {
  border-bottom-color: red;
}

<div id="calendar" class="calendar-content">

</div>