使用 html 数据属性作为 css 变量（即文本阴影）答案

【问题标题】：using html data-attributes as css-variable (i.e. text-shadow)使用 html 数据属性作为 css 变量（即文本阴影）
【发布时间】：2018-03-01 13:51:45
【问题描述】：

我正在尝试使用内联数据属性作为 css 的变量... 是否有任何已知的选项可以运行：

.mycss-class {text-shadow: attr(data-textshadow); }

&lt;div class="mycss-class" data-textshadow="0 0 0 #000"&gt;lorem ipsum&lt;/div&gt;

chrome dev-tool 只报告“无效的属性值”

非常感谢和亲切的问候

【问题讨论】：

来自developer.mozilla.org/en-US/docs/Web/CSS/attr：注意：attr() 函数可以与任何 CSS 属性一起使用，但对内容以外的属性的支持是实验性的。 换句话说，@ 987654324@ 不能与 content: 以外的任何东西一起使用，如果有的话
如果您将其放入数据属性中，为什么不直接将其放入样式属性中呢？
谢谢，我已经害怕了……这个例子只是一个更复杂结构的一个小版本。所以“lorem ipsum”代表了一个充满 dom 节点的手 :)
但是如果您将该阴影输出到数据属性中，您可以将该数据属性更改为style="text-shadow: 0 0 0 #000"，这将为该元素提供您所追求的文本阴影？还是我错过了重点
重点是 - 我尽量避免使用内联样式并保持良好的内容/代码比率......如果我可以不做，我会做 :) 我想要的是“data-cstcolor ="#dce568" 并将其用于文本阴影、悬停效果、背景颜色......等等我猜我得等css4了：D

标签： html css custom-data-attribute

【解决方案1】：

您可以通过CSS Custom Properties. 做到这一点

支持还不错，包括Edge（但没有IE）

p {
  width:80%;
  margin:1em auto;
  text-shadow: 2px 6px 2px grey;
}

p.colored {
  color: var(--mycolor)
}

p.shadowed {
  text-shadow: 2px 6px 2px var(--shadowcolor);
}

<p class="colored" style="--mycolor:red;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam numquam aut aperiam excepturi id quaerat, fugiat, impedit natus maxime voluptates officia? Fuga earum quis exercitationem et fugiat, amet nam officiis?</p>

<p class="shadowed" style="--shadowcolor:green;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam numquam aut aperiam excepturi id quaerat, fugiat, impedit natus maxime voluptates officia? Fuga earum quis exercitationem et fugiat, amet nam officiis?</p>

【讨论】：

不错！谢谢@Paulie_D