How to change border - bottom color through JS

Question

var subContent = document.getElementsByClassName("canChoose")[0];
subContent.style.borderBottomColor = "red";

.calendar-content .canChoose:after {
 width: 20px;
 margin-top: 5px;
 margin-left: auto;
 margin-right: auto;
 border-bottom: 8px solid #5A8C19;
 border-radius: 10px;
 content: "";
 display: block;
}

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

I tried to change the color, but it didn't work:

subContent.style.borderBottomColor = "red";

score 0 · Answer 1 · answered Aug 07 '17 at 03:51

0

Try the below

object.style.borderBottom = "width style color|initial|inherit"

answered Aug 07 '17 at 03:51

supergentle

1,001
1
14
33

1

It's after pseudo-class selector. – roybill Aug 07 '17 at 03:55

score 0 · Answer 2 · answered Aug 07 '17 at 03:58

0

this is the correct way to do it. maybe you have wrong selector?

also try doing borderBottom = "1px solid red"

answered Aug 07 '17 at 03:58

Sergey Kireyev

53
1
6

score 0 · Answer 3 · answered Aug 07 '17 at 03:59

0

document.getElementById("#ElemenetName").style.borderBottom = "thick solid #00"

answered Aug 07 '17 at 03:59

Cadalzo LC

87
8

score 0 · Answer 4 · answered Aug 07 '17 at 04:08

It's impossible to manipulate the pseudo-selector :after directly through JavaScript, because it doesn't technically exist in the DOM. There are workarounds depending on specific use case, though unfortunately these workarounds only allow you to manipulate the content (not the styling) of pseudo-selectors.

As such, you simply cannot change the colour of a border in :after, and your only option is to make use of the element directly.

If you weren't making use of :after, and were instead targeting the element directly, you'd be looking for .style.borderBottom:

var target = document.getElementsByClassName('canChoose')[0];
target.style.borderBottom = "8px solid red";

.canChoose {
  width: 20px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 8px solid #5A8C19;
  border-radius: 10px;
  content: "";
  display: block;
}

<div class="canChoose"></div>

Note that there's no JavaScript method to access the colour directly. Instead, you have to type out the full border declaration as you would for CSS (like 8px solid red).

Hope this helps! :)

It's not impossible, just [not straight forward](https://jsfiddle.net/c2n9Lh8t/)... — Kaiido, Aug 07 '17 at 05:19
This is my JavaScript code,How should I change? for(var i = 1; i <= monDaynum; i++) { var subContent = document.createElement("div"); subContent.className = "canChoose"; if(nowDay === i) { //subContent.style.borderBottomColor = "red"; } else {} if(i == nowDay) { subContent.classList.add("today"); } subContent.innerHTML = i; el.appendChild(subContent); } — roybill, Aug 07 '17 at 06:38

Chava Geldzahler · Answer 5 · 2017-08-08T03:50:46.910

0

You can't directly change the style of pseudo elements with JavaScript, since they are not DOM elements.

However, you can achieve this by adding a class to the element you want to change.

var subContent = document.getElementsByClassName("canChoose")[0];
subContent.className += " error";

.calendar-content .canChoose:after {
  content: "";
  display: block;
  width: 20px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 8px solid #5A8C19;
  border-radius: 10px;
}
.calendar-content .canChoose.error:after {
  border-bottom-color: red;
}

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

Note, that contrary to some of the answers in this post, if you were to style the element directly (versus :after pseudo element), your code works perfectly, as demonstrated below.

var subContent = document.getElementsByClassName("canChoose")[0];
subContent.style.borderBottomColor = "red";

.calendar-content .canChoose {
  content: "";
  display: block;
  width: 20px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 8px solid #5A8C19;
  border-radius: 10px;
}

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

edited Aug 08 '17 at 03:50

answered Aug 07 '17 at 04:29

Chava Geldzahler

3,605
1
18
32

1

you could also only add `.calendar-content .canChoose.error:after { border-bottom-color: red;}` no need to duplicate all the values that still apply. – Kaiido Aug 07 '17 at 05:29
This is my JavaScript code,How should I change? for(var i = 1; i <= monDaynum; i++) { var subContent = document.createElement("div"); subContent.className = "canChoose"; if(nowDay === i) { //subContent.style.borderBottomColor = "red"; } else {} if(i == nowDay) { subContent.classList.add("today"); } subContent.innerHTML = i; el.appendChild(subContent); } – roybill Aug 07 '17 at 06:37
Add a CSS block to style any element that has both the `canChoose` class, plus an additional class, making its border color red. (I just named it `error` because I thought this was to style content that has an error.) In your JavaScript, all you need to change is this line: `subContent.style.borderBottomColor = "red"` to `subContent.className += " your-additional-class-name";` – Chava Geldzahler Aug 08 '17 at 03:02
Or, as you suggest, `subContent.classList.add("your-additional-class-name")`; – Chava Geldzahler Aug 08 '17 at 03:51

How to change border - bottom color through JS

5 Answers5