javascript - クラス名でElemtを取得するjavascript

Question

ボーダーのボトムカラーを変更したい.arrow_box:after

JavaScript

document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor="blue";

しかし、それは機能しません！

これはフィドルの同じ例です

Answer 1

:afterJSを介して、のような疑似要素のスタイルを直接変更することはできません（また、それらを選択することもできます）。そしてその理由は、それらがDOMツリーの一部ではないためです。

あなたができる最善のことは、次のように要素に別のクラスを割り当てることです。

document.getElementsByClassName("arrow_box")[0].className = "arrow_box blue-border";

.arrow_box.blue-border:after {
    border-bottom-color: blue;
}