使用HTML5数据属性的CSS值

我想知道是否有任何方法可以使用HTML5的

数据-

属性设置css值，就像设置css

内容一样。目前它不起作用


HTML

事实上，这种特征是有预见性的，瞧

这应该像您所需要的那样工作，但目前不会

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

不过，它确实适用于伪元素上的
内容
。
您可以使用javascript创建一些css-
规则，以后可以在样式中使用这些规则：

div { width: attr(data-width) }

这将创建100个伪选择器，如下所示：

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 + "%");
}

注意：这有点离题，并不是你（或某人）真正想要的，但可能有帮助。
到今天为止，你可以从CSS3声明中的HTML5
data
属性中读取一些值。在CSS中，代码可以使用
数据
属性设置
内容

不幸的是，它不适用于
宽度
和
高度
（在Google Chrome 35、Mozilla Firefox 30和Internet Explorer 11中测试）

但是Fabrice Weinberg提供了对
数据宽度
和
数据高度
的支持。您可以在这里找到GitHub的repo:。
AFAIK您不能只使用CSS。不过，使用javascript是完全可能的。从语义上讲，这是一个坏主意，因为它打破了标记和布局的分离。您需要找到一个更好的示例，因为解决上述问题的方法是使用而不是。目前，我只能想象你的问题对属性选择器很有趣：我也有同样的问题。我正在做一些过渡和动画工作。data-*属性可用于存储元素的初始属性。我以为我可以用CSS访问那些存储的值，但似乎这只能用JS来完成。是的，它被称为HTML1.0。几年后，人们发现混合文档结构和表示是个坏主意，并将它们分为两部分：HTML和CSS。不难想象，重新组合它们是个坏主意跨浏览器？它在IE8更新之前是否有效？这现在是浏览器中可用的功能。@CaptainHypertext根据
caniuse.com
，该功能仍然普遍不受支持（伪元素的content属性中的字符串除外）。因为它不起作用，我打赌我必须downvote@Zeus兹德拉夫科夫：这是什么逻辑？这个答案的全部要点是代码不起作用——因为它一开始就不受支持。这怎么是答案的错呢？未捕获的TypeError:无法读取main.js:1172 at main.js:1179（匿名）@main.js:1172（匿名）@main.js:1179 09:02:48.363处null的属性“length”
div { width: attr(data-width) }

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 + "%");
}

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