Valeurs CSS utilisant l'attribut de données HTML5

Question

 width: attr(data-width);
 

Je souhaite savoir s'il est possible de définir une valeur CSS à l'aide de l'attribut data- HTML5 de la même manière que vous pouvez définir css content . Actuellement ça ne marche pas.

---

HTML

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

CSS

 div { width: attr(data-width) }
 

Answer 1

Il existe, en effet, une prévision pour une telle fonctionnalité, regardez http://www.w3.org/TR/css3-values/#attr-value

Ce violon devrait fonctionner comme ce dont vous avez besoin, mais pas pour le moment.

Malheureusement, cela reste un brouillon et n’est pas complètement implémenté sur les principaux navigateurs.

Cela fonctionne pour content sur les pseudo-éléments, cependant.

Answer 2

Théoriquement oui, avec des sélecteurs d'attributs mais je n'ai pas testé cela. essayer:

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

http://www.w3.org/TR/CSS2/selector.html#matching-attrs devrait vous aider à obtenir ce que vous voulez

Answer 3

Vous pouvez créer avec javascript des css- rules que vous pourrez utiliser plus tard dans vos styles: 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 + "%");
}
 

Cela crée 100 pseudo-sélecteurs comme celui-ci:

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

Remarque: Ceci est un peu hors sujet, et pas vraiment ce que vous (ou quelqu'un) voulez, mais peut-être utile.

Answer 4

À compter d'aujourd'hui, vous pouvez lire quelques valeurs de HTML5 data attributs CSS3 déclarations. Dans CaioToOn le violon le code CSS pouvez utiliser l' data propriétés pour définir l' content.

Malheureusement, il ne fonctionne pas pour l' width et height (testé dans Google Chrome 35, Mozilla Firefox 30 Et Internet Explorer 11).

Mais il y a un CSS3 attr() Polyfill de Fabrice Weinberg, qui offre du soutien pour data-width et data-height. Vous pouvez trouver le dépôt GitHub ici: cssattr.js.

Answer 5

http://jsfiddle.net/JamesKyle/8ntfZ/

Merci @frank & @TJ. pour me diriger dans la bonne direction.

Ce n'est pas tout à fait ce que j'avais en tête mais très proche.