Значения CSS с использованием атрибута данных HTML5

width: attr(data-width); 

Я хочу знать, можно ли установить значение css с атрибутом data- HTML5 так же, как вы можете установить content css. В настоящее время это не работает.


HTML

 

CSS

 div { width: attr(data-width) } 

Существует, действительно, предвидение для такой функции, посмотрите http://www.w3.org/TR/css3-values/#attr-notation

Эта скрипка должна работать так, как вам нужно, но пока не будет.

К сожалению, это все еще черновик и не полностью реализован в основных браузерах.

Тем не менее, он работает для content на псевдоэлементах.

Вы можете создать с помощью javascript некоторые css- rules , которые впоследствии вы можете использовать в своих стилях: http://jsfiddle.net/ARTsinn/vKbda/

 var addRule = (function (sheet) { if(!sheet) return; return function (selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); } }(document.styleSheets[document.styleSheets.length - 1])); var i = 101; while (i--) { addRule("[data-width='" + i + "%']", "width:" + i + "%"); } 

Это создает 100 псевдоселекторов, таких как:

 [data-width='1%'] { width: 1%; } [data-width='2%'] { width: 2%; } [data-width='3%'] { width: 3%; } ... [data-width='100%'] { width: 100%; } 

Примечание: это немного оффтопно, и не совсем то, что вы (или кто-то) хочет, но, возможно, полезно.

На сегодняшний день вы можете прочитать некоторые значения из атрибутов data HTML5 в объявлениях CSS3. В скрипте CaioToOn код CSS может использовать свойства data для настройки content .

К сожалению, он не работает для width и height (проверен в Google Chrome 35, Mozilla Firefox 30 и Internet Explorer 11).

Но у Fabrice Weinberg есть CSS3 attr () Polyfill, который обеспечивает поддержку data-width и data-height . Здесь вы можете найти repository GitHub: cssattr.js .

  • Атрибут InternalsVisibleTo не работает
  • __ атрибут __ ((const)) vs __attribute __ ((чистый)) в GNU C
  • Что такое начальный масштаб, пользовательский масштабируемый, минимальный масштаб, атрибут максимальной шкалы в метатеге?
  • Как работают classы атрибутов?
  • Зацикливание объекта datetime приводит к числовому iteratorу
  • Имя атрибута jQuery содержит
  • Сериализация XML - Отключить корневой элемент рендеринга массива
  • Получить перечисление из атрибута enum
  • Выбор элементов по атрибуту
  • Когда выполняется конструктор пользовательского атрибута?
  • Можете ли вы использовать «где», чтобы требовать атрибут в c #?
  • Давайте будем гением компьютера.