时间戳

首页 > 解决方案 > 动态设置 html 代码中的选择器样式

css - 动态设置 html 代码中的选择器样式

问题描述

我有三个按钮。悬停时它们有动画。我用 ejs 渲染引擎加载我的文件。我想为三个按钮设置不同的动画颜色，并在发送 html 页面时动态设置这些颜色。

我试过这样的事情：

<button class="button button--style" onclick="window.location.href='/location'" style=":after {background: <%= color %>;}">Button 1</button>

所有的动画都是通过 tbutton-style定义的，我还在那里定义了 after 样式：

.button--style::after {
    background: #f00;
}

我怎么能做到这一点？

标签： cssejs

解决方案

您必须改用类并在后面的代码中设置您的类。如前所述，您不能在样式标签中使用伪类；

<button class="button button--style" onclick="window.location.href='/location'" class="<%= class1variable %>">Button 1</button>

class1::after {
    background-color: #F0F0F0;
}

class2::after {
    background-color: #BLAH;
}

推荐阅读