Question

我想随机（选择一个列表）改变我已经完成的标题背景的颜色并使用这个JS工作得很好：

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

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

但我希望将相同的随机颜色应用于此a的'border-top-color'：在此处标记后：

.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中访问：你需要使用this link中的一个tecniques来按你想要的方式添加css。

将随机css颜色更改为一个DIV的背景和另一个DIV的边框顶部颜色

1 个答案: