Question

这可能过于简单，我只是错过了它，但是：我创建了一个简单的随机字符串生成器，它被限制为在创建Hex代码时使用的字符，然后它将该十六进制颜色应用于背景颜色一个div。我还使用了一些stock-css将div变成了Hexagon。这里的问题是我无法弄清楚如何更改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+";";

Answer 2

您可以使用常规div，而不是使用peudo-elements。像这样定义你的标记：

<强> HTML

<div id="boxBefore" class="hexagonBefore" onclick="getColorHex()"></div>
<div id="box" class="hexagon" onclick="getColorHex()"></div>
<div id="boxAfter" class="hexagonAfter" onclick="getColorHex()"></div>

<强> CSS

.hexagon {
    width: 100px;
    height: 55px;
    background: #000000;
    position: relative;
}
.hexagonBefore {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #000000;
}
.hexagonAfter {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #000000;
}

然后简单地改变所有3个元素的颜色：

<强>的JavaScript

var colorBox = document.getElementById("box");
colorBox.style.backgroundColor = randomStr;

var colorBoxBefore = document.getElementById("boxBefore");
colorBoxBefore.style.borderBottomColor = randomStr;

var colorBoxAfter = document.getElementById("boxAfter");
colorBoxAfter.style.borderTopColor = randomStr;

演示：http://jsfiddle.net/2p5qz/6/

更改类的CSS属性：after

2 个答案: