使用HTML数据属性作为CSS变量（即，文本阴影）

Question

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

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

<div class="mycss-class" data-textshadow="0 0 0 #000">lorem ipsum</div>

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

非常感谢和问候

Answer 1

您可以使用CSS自定义属性来执行此操作。

支持非常好，包括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>