更改類的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+";";

Answer 2

可以使用常規div來代替使用偽元素。 這樣定義您的標記：

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/