如何将元素的数据等属性值用于 CSS 属性值？

Question

我想在单个css中使用多个数据属性。那有可能吗。？

我已经创建了css，我想在css中使用data-letters和data-color，但它不起作用。

数据颜色将置于背景，数据字母将置于css 中的内容

body { font-family: sans-serif; }
[data-letters]:before {
content: attr(data-letters);
display: inline-block;
font-size: 32px;
width: 85px;
height: 80px;
line-height: 2.5em;
text-align: center;
border-radius: 50%;
background: #95A73B;
vertical-align: middle;
margin-right: 1em;
color: white;
margin-top:  20px;
}

<p data-letters="PB" data-color="#c0227a"></p>

Answer 1

TL；博士：

你不能。没有浏览器支持对的任何内容使用attr()，只有::before和::after框上的content:属性：

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr
• https://caniuse.com/mdn-css_types_attr_type-or-unit

背景：

• CSS的attr()函数理论上允许您将DOM中的任意元素属性用于任何CSS属性值。
  • 然而，从2022年初起，您只能将attr()与CSS的content:属性一起使用，该属性仅适用于::before和::after伪元素
  • 但是可以连接content:中的多个属性，例如：

body { font-family: sans-serif; }
[data-letters]:before {
content: attr(data-letters) ' ' attr(data-color);
display: inline-block;
font-size: 32px;
line-height: 2.5em;
text-align: center;
border-radius: 50%;
background: #95A73B;
vertical-align: middle;
color: white;
}

<p data-letters="PB" data-color="#c0227a"></p>

但这不是你想要的。

---

• 注意，从概念上讲，CSS中的attr()函数返回任意文本字符串值，而不是">键入"；价值

  • 所以一个字符串"CCD_ 14"；与CSS颜色-类型的值#aabbcc不同，这也是我们不能执行color: attr(data-color);的原因之一
  • 请注意，即使浏览器支持color: attr(data-color);，它也相当于执行color: "#aabbcc"而不是color: #aabbcc，这是无效的，因此即使支持它，它也不会工作。
    • 因此需要类型的值
    • (我注意到，我们可以将任意自定义属性与真实属性重用，而不管它们的类型如何，并且自定义属性往往感觉像字符串值(但它们不是(，所以感觉不一致-但让我们假设目前这不是一件事(
  • 。。。我确实同意，令人惊讶的是，对这一点的支持很容易实施，而且14年来一直是一个悬而未决的问题

• 我推测浏览器(还(不支持attr()用于其他属性的原因是，您只需在元素上设置一个内联style=""属性即可获得相同的最终结果(当然，除了::before和::after，因为这些框不会1:1映射到DOM元素(。

• 如果您想跟踪实施进度：

  • 铬/铬/闪烁/边缘，自2013年起
  • Firefox/Gecko，自2008年以来
  • Safari/Apple WebKit，自2009年起

备选方案

如前所述，可以使用内联style=""属性按每个元素设置属性；因此，如果您使用内联样式来设置自定义属性，那么任何::before和::after框的样式规则都可以使用这些自定义属性，而无需在其父框上设置显式样式属性，如：

body { font-family: sans-serif; }
[data-letters]:before {
content: attr(data-letters);
display: inline-block;
font-size: 32px;
line-height: 2.5em;
text-align: center;
border-radius: 50%;
background-color: var(--my-color);
vertical-align: middle;
color: white;
}

<p style="--my-color: #c0227a;" data-letters="PB"></p>

尽管我同意这是不雅的，并且必然意味着在data-属性和style=""属性内部都复制值(假设您也想保留data-属性(。