使用HTML数据属性作为CSS变量(即文本阴影) [英] using html data-attributes as css-variable (i.e. text-shadow)

问题描述

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

i'm trying to use inline data-attributes as variables for css... is there any known option to get this run:

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

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

chrome开发工具仅报告无效的属性值"

chrome dev-tool just reports "invalid property value"

非常感谢&亲切的问候

many thanks & kind regards

推荐答案

您可以使用

You can do this with CSS Custom Properties.

支持非常好，包括Edge(但没有IE)

Support is pretty good, including Edge (but no 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变量(即文本阴影)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！