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

Question

我正在寻找使用HTML数据属性为CSS属性分配value 。

基本上我的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级增加了在任何CSS属性上使用attr()并将其用于非字符串值（例如，数字，颜色）的功能 。

FIREFOX （部分支持）

https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr

EDGE （正在考虑中）

https://developer.microsoft.com/zh-cn/microsoft-edge/platform/status/csslevel3attrfunction/

CHROME （部分支持）

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

就个人而言，我暂时会坚持使用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属性。