How to modify the border - bottom color of pseudo-class elements through JavaScript?

Question

I am trying to change the border color for one of the elements to red.

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>

I tried to change with JavaScript code, but failed

Possible duplicate of [Setting CSS pseudo-class rules from JavaScript](https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) — Sean, Aug 07 '17 at 11:21
First of all, relevant code belongs directly into your question, not just as a screenshot. — CBroe, Aug 07 '17 at 11:21

Chava Geldzahler · Accepted Answer · 2017-08-08T03:55:08.987

You're very close. You can't change it by manipulating the style of the element directly, because the style is applied to a pseudo class. You can, however, add a class, as you are doing.

All you still need is the CSS declaration for elements with the additional class.

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>

score 0 · Answer 2 · answered Aug 07 '17 at 12:05

0

I can see it works just fine. See the JSfiddle

I think you are missing monDaynum, nowDay or even el. Check/debug your code carefully. If you do not find anything then modify your question adding relevant code directly as @CBroe said.

answered Aug 07 '17 at 12:05

Siddiqui Noor

5,575
5
25
41

How to modify the border - bottom color of pseudo-class elements through JavaScript?

2 Answers2