将 HTML 属性分配给 CSS 属性中的值

Question

我希望使用 HTML 数据属性将 a 分配value给 CSS 属性。

基本上我的 HTML 是这样的：

<div class='dynamic-color' data-assigned-color='red'>lorem ipsum</div>
<div class='dynamic-color' data-assigned-color='blue'>lorem ipsum</div>
<div class='dynamic-color' data-assigned-color='green'>lorem ipsum</div>

我希望我的 CSS 类似于：

.dynamic-color {
    color: [data-assigned-color];
}

我目前的工作解决方案是：

.dynamic-color[data-assigned-color='red'] {
    color:red;
}
...

但是，这有几个问题。

1. 当用户通过 UI 向数据库添加值时，我还需要更新 CSS
2. 高度重复的代码

注意：我使用的是 LESS，所以 LESS 或纯 CSS 解决方案是好的。

Answer 1

目前，如果没有 javascript，这是不可能的。

当完全支持时，您将能够像这样使用数据属性：

.dynamic-color {
  color: attr(data-assigned-color);
}

作为替代方案，您是否考虑过以下简单的事情：

CSS

在样式表中设置一次默认颜色选项。

.red{color:red !important;}
.blue{color:blue !important;}
.green{color:green !improtant;}

HTML

根据需要添加/删除类以更改文本颜色。（我不确定您使用的是什么后端，但这可以通过您的 javascript 或背后的代码来完成）。

<div class="dynamic-color red" data-assigned-color="red">lorem ipsum</div>

浏览器支持

虽然attr()大多数浏览器都支持content属性、CSS 值和单位。级别 3 添加了attr()在任何 CSS 属性上使用的能力，并将其用于非字符串值（例如数字、颜色）。

火狐（部分支持）

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

EDGE（正在考虑中）

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csslevel3attrfunction/

铬（部分支持）

可以使用属性选择器，但我建议在生产中使用它之前在所有目标浏览器上测试您的代码。

我个人会暂时坚持使用 JavaScript。

Answer 2

尝试使用 jQuery 来实现：

$('.dynamic-color').click(function() {
  $(this).css('background', $(this).attr('data-assigned-color'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dynamic-color' data-assigned-color='red'>lorem ipsum</div>
<div class='dynamic-color' data-assigned-color='blue'>lorem ipsum</div>
<div class='dynamic-color' data-assigned-color='green'>lorem ipsum</div>

正如下面的评论所建议的，您可以添加一个纯内联 CSS 解决方案，如下所示：

<div class='dynamic-color' style="background:red;">lorem ipsum</div>
<div class='dynamic-color' style="background:blue;">lorem ipsum</div>
<div class='dynamic-color' style="background:green;">lorem ipsum</div>

尝试使用style属性而不是data-assigned-color属性。