Question

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

＆＃13;

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);
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我尝试使用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>

Answer 2

我可以看到它运作得很好。请参阅JSfiddle

我认为您遗失了monDaynum，nowDay甚至el。仔细检查/调试代码。如果您没有找到任何内容，请修改您的问题，直接添加相关代码，如@CBroe所说。

如何通过JavaScript修改伪类元素的边框颜色？

2 个答案: