Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我试图改变颜色，但它不起作用：

subContent.style.borderBottomColor = "red";

Answer 1

尝试以下

object.style.borderBottom =＆＃34;宽度样式颜色| initial | inherit＆＃34;

Answer 2

这是正确的方法。也许你有错误的选择器？

也尝试 borderBottom =“1px solid red”

Answer 3

document.getElementById（＆＃34;＃ElemenetName＆＃34;）。style.borderBottom =＆＃34;粗实＃00＆＃34;

Answer 4

直接通过JavaScript 操纵伪选择器:after 是不可能的，因为它在技术上并不存在于DOM中。 are workarounds取决于具体的用例，但不幸的是，这些变通方法只允许您操纵伪选择器的内容（而不是样式）。

因此，您只需无法更改:after中边框的颜色，您唯一的选择就是直接使用该元素。

如果您没有使用:after，而是直接定位该元素，那么您一直在寻找.style.borderBottom：

＆＃13;
＆＃13;
var target = document.getElementsByClassName('canChoose')[0]; target.style.borderBottom = "8px solid red";
＆＃13;
.canChoose { width: 20px; margin-top: 5px; margin-left: auto; margin-right: auto; border-bottom: 8px solid #5A8C19; border-radius: 10px; content: ""; display: block; }
＆＃13;
<div class="canChoose"></div>
＆＃13;
＆＃13;
＆＃13;

请注意，没有JavaScript方法可以直接访问颜色。相反，您必须像对待CSS一样输出完整的边界声明（例如8px solid red）。

希望这有帮助！：）

Answer 5

您无法使用JavaScript直接更改伪元素的样式，因为它们不是DOM元素。

但是，您可以通过向要更改的元素添加类来实现此目的。

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>

请注意，与本文中的一些答案相反，如果您要直接设置元素的样式（而不是:after伪元素），您的代码将完美运行，如下所示。

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>

如何通过JS更改border-bottom颜色

5 个答案: