使用HTML5数据属性的CSS值

Question

width: attr(data-width);

我想知道是否有任何方法可以使用HTML5的data-属性设置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

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

不幸的是,它仍然是草案,并没有在主要浏览器上完全实现.

但它确实适用content于伪元素.

Answer 2

你可以用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%; }

注意:这有点偏离主题,并不是你(或某人)想要的,但也许有帮助.

Answer 3

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

遗憾的是它不工作的width和height(谷歌浏览器35,Mozilla Firefox浏览器30的Internet Explorer 11测试).

但Fabrice Weinberg 有一个CSS3 attr()Polyfill,它为data-width和提供支持data-height.你可以在这里找到它的GitHub回购:cssattr.js.