將隨機CSS顏色更改為一個DIV的背景和另一個DIV的邊框頂部顏色

Question

我想使用此JS隨機（從選定列表中）更改標頭背景的顏色，該顏色已經完成並且效果很好。

var bgcolorlist=new Array("#ef5c20", "#a7dbca", "#c5e53f", "#ffad14")

$(".cbp-hsinner").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);

但我想將相同的隨機顏色應用於此a：after標記的“邊界頂部顏色”：

.cbp-hsmenu > li.cbp-hsitem-open > a:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #ef5c20;
border-width: 10px;
left: 50%;
margin-left: -10px;
}

HTML：

 <nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">




                <div class="cbp-hsinner">

                 <div class="site-header__logo-alt"><a href="http://helloarchie.blue/"><img width="145" alt="Hello Archie" src="<?php echo theme_url('/img/HA-LOGO3.png'); ?>" /></a></div>

                    <ul class="cbp-hsmenu">

                    <li>
                            <a href="http://helloarchie.blue">Home</a>
                        </li>



                        <li>
                            <a href="#">Categories</a>
                            <ul class="cbp-hssubmenu">
                                <li><a href="http://helloarchie.blue/category/personal/"><span>Personal</span></a></li>
                            <li><a href="http://helloarchie.blue/category/monthly-updates/"><span>Monthly Updates</span></a></li>
                                <li><a href="http://helloarchie.blue/category/informative/"><span>Informative</span></a></li>
                                <li><a href="http://helloarchie.blue/category/reviews/"><span>Reviews</span></a></li>
                            <li><a href="http://helloarchie.blue/category/guides/"><span>Guides</span></a></li>
                            </ul>
                        </li>

                       <li>
                            <a href="http://helloarchie.blue/about">About</a>
                        </li>

                        <li>
                            <a href="#">Elsewhere</a>
                            <ul class="cbp-hssubmenu">
                                <li><a href="http://kaye.at/"><span>Portfolio</span></a></li>
                                <li><a href="http://kaye.at/baby/"><span>The Baby Project</span></a></li>

                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>

這可能嗎？

Answer 1

創建顏色的變量，然后將其應用於兩個CSS規則。

var bgcolorlist=new Array("#ef5c20", "#a7dbca", "#c5e53f", "#ffad14");
var rgb = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
$(".cbp-hsinner").css("background-color",rgb);

這樣，您只需要提取一次隨機顏色並將其應用於所需的兩個位置即可。 除此之外，無法在CSS中直接將一個元素的border-top-color為另一個元素的background-color 。 由於您無法直接在JS中訪問：after，因此您將需要使用此鏈接中的一種技術以所需的方式添加CSS。