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

width: attr(data-width);

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

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

Ответ 1

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

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

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

Однако он работает для content для псевдоэлементов.

Ответ 2

Теоретически да, с селекторами атрибутов, но я не тестировал это. попробуйте:

[data-width="600px"] {
width: 600px;
}

http://www.w3.org/TR/CSS2/selector.html#matching-attrs должен помочь вам добраться до того, что вы хотите

Ответ 3

Вы можете создать с помощью 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%; }

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

Ответ 4

На сегодняшний день вы можете прочитать некоторые значения из атрибутов HTML5 data в объявлениях 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. Здесь вы можете найти репозиторий GitHub: cssattr.js.