Question

是否可以向<figure>元素添加一些数据属性，然后从CSS访问它们？

例如，我已经尝试了

figure { margin: 0 attr(data-margin %); }

与

<figure data-margin="15">...</figure>

但它没有用。

有没有使用JS的另一种方式？

编辑：我不认为我的问题是重复的。事实上，我正在寻找另一种方法来实现这一目标。

我的目标是使用属性装饰页面中的某些元素，然后最终用户可以通过编写一些CSS代码来访问和使用这些属性。如果这是不可能的，我只是要求他们编写JS代码，但我认为这样会更安全。

（最终用户是ML研究人员。我确信他们可以处理一些CSS或JS代码。）

Answer 1

你可以这样做：

.test {
    display: inline-block;
    background-color: gray;
    width: attr(data-width px);
}

.test:after {
    content: attr(data-name);
}

<div class='test' data-name=" - CONTENT" data-width="200">teste</div>

但它在Chrome中无效：https://developer.mozilla.org/en-US/docs/Web/CSS/attr

如何将数据属性添加到<figure>元素然后从CSS访问它？

1 个答案: