javascript - 更改类 : after 的 CSS 属性

Question

这可能过于简单，我只是错过了它，但是:我创建了一个简单的随机字符串生成器，该生成器仅限于创建十六进制代码中使用的字符，然后它将该十六进制颜色应用于背景颜色一个div的。我还使用了一些 stock-css 将 div 变成六边形。这里的问题是我不知道如何更改 div 元素之前和之后的 CSS。

我认为这可能是这样的:

 document.getElementsByClassName('hexagon')[0].style['border-top'] = "25px solid" + randomStr + ";";

但它返回时为未定义。

到目前为止我的jsfiddle:JSFIDDLE

Answer 1

这是不可能的。但是你可以这样做:

document.getElementsByClassName('hexagon')[0].className = "hexagon new_style";

然后在CSS中:

.new_style:after {
    border-top:25px solid #00f;
  }

尽管这不包括randomStr;。

但是，如果您不使用 :after 而只是将 border-top 应用于该类，则可以执行以下操作:

document.getElementsByClassName('new_style')[0].style['border-top'] = "25px solid "+ randomStr+";";