使用HTML5数据属性的CSS值

width: attr(data-width); 

我想知道是否有任何方法可以使用HTML5的data- attribute设置CSS值，就像您可以设置CSS content 。 目前它不工作。

---

HTML

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

CSS

 div { width: attr(data-width) } 

Answer 1

事实上，有这样的特征的预见，看看http://www.w3.org/TR/css3-values/#attr-notation

这个小提琴应该像你所需要的那样工作，但现在不会。

不幸的是，它仍然是一个草稿，并没有完全在主stream浏览器上实现。

尽pipe如此，它仍然适用于伪元素上的内容。

Answer 2

理论上是的，与属性select器，但我没有testing过这个。 尝试：

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

http://www.w3.org/TR/CSS2/selector.html#matching-attrs应该帮助你达到你想要的;

Answer 3

你可以用javascript创build一些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 + "%"); } 

这会创build100个这样的伪select器：

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

注意：这有点偏离主题，而不是你（或某人）想要的，但也许有帮助。

Answer 4

截至今天，您可以从CSS3声明中的HTML5 data属性中读取一些值。 在CaioToOn的小提琴 CSS代码可以使用data属性来设置content 。

不幸的是，它不适用于width和height （在谷歌Chrome 35，Mozilla Firefox 30和Internet Explorer 11中testing）。

但是Fabrice Weinberg提供了一个CSS3的attr（）Polyfill ，它提供了对data-width和data-height 。 你可以在这里findGitHub 仓库 ： cssattr.js 。