Search code examples
csspseudo-classcustom-data-attribute

Can CSS convert a string to integer?

I use attr(data-width) to get the data-width-attribute from some list-item's. I try to use these values to set the width of that element.

The problem is that css cannot handle strings as width/height-value. e.g.:

<foo data-width='100%'></foo>

/* can not work */
foo {
    width: attr(data-width)
}

so I need to convert the value from the data-attribute to an integer (+unit).

Is that somehow possible?

Solution

  • No. And you cannot use an attr(...) construct as the value of a normal property, only in the value of a content property.

    Instead of data-width attributes, you could use just style attributes. Not ideal, but more logical than to use data-* attributes to carry style info.