使用 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 开发工具只报告 "invalid property value"

非常感谢和亲切的问候

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

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

using html data-attributes as css-variable (i.e. text-shadow)

html

css

custom-data-attribute