Может ли CSS преобразовать строку в целое число?

Я использую attr(data-width) для получения атрибута data-width от некоторых list-item. Я пытаюсь использовать эти значения для установки ширины этого элемента.

Проблема в том, что css не может обрабатывать строки как width/height-значение. например.:

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

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

поэтому мне нужно преобразовать значение атрибута data в целое число (+единица измерения).

Это как-то возможно?


css pseudo-class custom-data-attribute
person yckart    schedule 05.06.2013    source источник
comment
Точно не дубликат. Неправильно обманутый вопрос возникал на SO так часто. Например, преобразовав ‹string› в ‹integer›. Не только attr() может возвращать строковые значения, но и функция counter(). И attr() теперь принимает новый параметр для преобразования его типа. Так что этот вопрос далеко не дубликат того.   -  person tsh    schedule 23.02.2021

Ответы (2)


arrow_upward
5
arrow_downward

Нет. И вы не можете использовать конструкцию attr(...) в качестве значения обычного свойства, только в значении свойства content.

Вместо атрибутов data-width вы можете использовать только атрибуты style. Не идеально, но более логично, чем использовать атрибуты data-* для передачи информации о стиле.

person Jukka K. Korpela    schedule 05.06.2013
comment
Хорошо, приятно знать. Спасибо! - person yckart; 05.06.2013
comment
~ 5 лет, чтобы принять ваш ответ ... Позор мне! - person yckart; 25.05.2018

arrow_upward
0
arrow_downward

не без прекомпилятора и миксинов SASS/SCSS

person Brandt Solovij    schedule 05.06.2013
comment
Я не думаю, что это работает: fiddle.jshell.net/pA3Kq - person yckart; 05.06.2013
comment
Препроцессоры генерируют CSS сначала, и только скомпилированный CSS отправляется в браузер. У них нет возможности взять информацию из DOM и преобразовать ее в целое число, а CSS изначально не имеет такой возможности. - person cimmanon; 05.06.2013
comment
Скрипка не имеет никакого смысла, потому что нет содержимого, чтобы сделать элемент видимым: fiddle.jshell.net /pA3Kq/1. Как видите, элемент не доходит до края документа. - person cimmanon; 05.06.2013
comment
@cimmanon просто замени attr(data-width) на 100% в моей скрипке ;) - person yckart; 05.06.2013
comment
@PeeHaa埽 это был простой тест с использованием SCSS в качестве препроцессора. - person yckart; 05.06.2013
comment
@yckart Аааааааа. Теперь становится понятно :-) - person PeeHaa; 05.06.2013