Question

我希望使用HTML数据属性将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;
}
...

然而，这有几个问题。

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

注意：我使用的是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（）有效支持内容属性的所有浏览器，但CSS值和单元级别3增加了在任何CSS属性上使用attr（）的能力，并将其用于非字符串值（例如数字，色）。

FIREFOX （部分支持）

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

EDGE （正在考虑中）

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

CHROME （部分支持）

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

就个人而言，我暂时会坚持使用JavaScript。

Answer 2

尝试使用jQuery：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案:

浏览器支持