每次加载页面时，如何使下划线更改颜色？

Question

I would like the underline under my text to change color randomly every time the page loads. 我希望每次页面加载时，文本下方的下划线都能随机更改颜色。

I have had success using this script before: 我以前使用此脚本成功：

<script type="text/javascript">
    var classes = ['red', 'blue', 'yellow'];
    var random_class = classes[Math.floor(Math.random() * classes.length)];
    var title = document.getElementById('decor');
    classes.forEach((el) => {
    title.classList.remove(el);
    });
    title.classList.add(random_class);
</script>

with this on my CSS: 在我的CSS上：

.red {
box-shadow: inset 0 -1.3vw 0 0 ##FF0000;
}

.yellow {
box-shadow: inset 0 -1.3vw 0 0 #FFFF00;
}

.blue {
box-shadow: inset 0 -1.3vw 0 0 #0000FF;
}

But I cannot (newb here) rig it with my current code (see snippet below) 但是我不能（在这里newb）使用当前代码绑定它（请参见下面的代码段）

 body { background-color: #FFFFFF; margin: 0px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { display: block; width: 85%; /*center vertically & horizontally*/ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } a, a:visited, a:hover { -ms-text-align-last: justify; -moz-text-align-last: justify; text-align-last: justify; text-decoration: none; color: #000000; } #test1 { display: inline-block; height: auto; width: auto; visibility: visible; font-family: "Times New Roman", Times, serif; text-align: center; line-height: 7.5vw; margin: 0; font-size: 7.7vw; font-weight: bold; position: relative; } #test1:before { content: ""; box-shadow: inset 0 -1.3vw 0 0 #00f9ff; position: absolute; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; animation-name: stretchRight; animation-duration: 0.8s; animation-fill-mode: forwards; animation-timing-function: ease-out; z-index:-1; } @keyframes stretchRight { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

  <body> <div class="container"> <div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div> </div> </div> </body>

How can I rig them together to make it so that the underline changes color every time the page loads? 如何将它们绑定在一起以使每次页面加载时下划线都会更改颜色？

Answer 1

You can add the .red, .yellow, .blue,.etc... classes to your css and have javascript pick one of those classes and add it dynamically to test1 . 您可以将.red, .yellow, .blue,.etc...类添加到css并让javascript选择其中一个类并将其动态添加到test1 。 Since the number of colors to choose from is small, the colors might repeat very often. 由于要选择的颜色数量很少，因此颜色可能会经常重复。 If you want to ensure that the colors are different, you might need to use a cookie to store then value. 如果要确保颜色不同，则可能需要使用cookie来存储值。

 function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } var classes = ['red', 'blue', 'yellow','green','cyan','magenta','orange','black']; var random_index = getRandomIntInclusive(0, classes.length -1); var title = document.getElementById('test1'); var random_class= classes[random_index]; title.classList.add(random_class);

 body { background-color: #FFFFFF; margin: 0px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { display: block; width: 85%; /*center vertically & horizontally*/ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } a, a:visited, a:hover { -ms-text-align-last: justify; -moz-text-align-last: justify; text-align-last: justify; text-decoration: none; color: #000000; } #test1 { display: inline-block; height: auto; width: auto; visibility: visible; font-family: "Times New Roman", Times, serif; text-align: center; line-height: 7.5vw; margin: 0; font-size: 7.7vw; font-weight: bold; position: relative; } #test1:before { content: ""; box-shadow: inset 0 -1.3vw 0 0 #00f9ff; position: absolute; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; animation-name: stretchRight; animation-duration: 0.8s; animation-fill-mode: forwards; animation-timing-function: ease-out; z-index: -1; } .red:before { box-shadow: inset 0 -1.3vw 0 0 red !important; } .yellow:before { box-shadow: inset 0 -1.3vw 0 0 yellow !important; } .blue:before { box-shadow: inset 0 -1.3vw 0 0 blue !important; } .green:before { box-shadow: inset 0 -1.3vw 0 0 green !important; } .cyan:before { box-shadow: inset 0 -1.3vw 0 0 cyan !important; } .magenta:before { box-shadow: inset 0 -1.3vw 0 0 magenta !important; } .orange:before { box-shadow: inset 0 -1.3vw 0 0 orange !important; } .black:before { box-shadow: inset 0 -1.3vw 0 0 black !important; } @keyframes stretchRight { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

 <body> <div class="container"> <div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a> </div> </div> </body>

每次加载页面时，如何使下划线更改颜色？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-06-29 18:31:07

每次加载页面时，如何使下划线更改颜色？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-06-29 18:31:07

解决方案1
2 已采纳 2017-06-29 18:31:07