htmlcsscustom-data-attribute

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

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 dev-tool just reports "invalid property value"

many thanks & kind regards

Solution

  • You can do this with CSS Custom Properties.

    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>