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

这个fiddle应该像您需要的那样工作，但现在不会。

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

但它对伪元素的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

截至今天，您可以从CSS3声明中的HTML5 data属性中读取一些值。在CaioToOn's fiddle中，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。

使用HTML5数据属性的CSS值

3 个答案: