Can CSS convert a string to integer? [duplicate]

Question

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?

Definitely not a duplicate. Wrongly duped question happened on SO so frequently. For example, by converting <string> to <integer>. Not only attr() may yield string values, but also counter() function. And attr() now accept a new parameter to convert its type. So this question is far from a duplicate of that one. — tsh
– tsh, Commented Feb 23, 2021 at 3:34

Jukka K. Korpela · Accepted Answer · 2013-06-05 19:03:46Z

9

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.

answered Jun 5, 2013 at 19:03

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yckart Over a year ago

~5 Years to accept your answer... Shame on me!

Brandt Solovij · Accepted Answer · 2013-06-05 18:57:46Z

-1

not without a precompiler and SASS / SCSS mixins

answered Jun 5, 2013 at 18:57

Brandt Solovij

2,13413 silver badges24 bronze badges

6 Comments

yckart Over a year ago

I don't think that this works: fiddle.jshell.net/pA3Kq

cimmanon Over a year ago

Preprocessors generate the CSS first and only the compiled CSS is sent to the browser. They have no way of taking the information from the DOM and turning it into an integer and CSS does not have that ability natively.

cimmanon Over a year ago

The fiddle doesn't make any sense because there's no content to make the element visible: fiddle.jshell.net/pA3Kq/1. As you can see, the element does not extend all the way to the edge of the document.

yckart Over a year ago

@cimmanon just replace attr(data-width) with 100% in my fiddle ;)

yckart Over a year ago

@PeeHaa埽 this was just a simple test using SCSS as preprocessor

|

Collectives™ on Stack Overflow

Can CSS convert a string to integer? [duplicate]

2 Answers 2

1 Comment

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Linked

Related