使用 HTML5 数据属性的 CSS 值 [重复]答案

【问题标题】：CSS values using HTML5 data attribute [duplicate]使用 HTML5 数据属性的 CSS 值 [重复]
【发布时间】：2016-03-24 04:25:22
【问题描述】：

width: attr(data-width);

我想知道是否有任何方法可以使用 HTML5 的 data- 属性设置 css 值，就像设置 css content 一样。目前它不起作用。

HTML

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

CSS

div { width: attr(data-width) }

【问题讨论】：

AFAIK 你不能只使用 CSS。不过使用 javascript 是完全有可能的。
在语义上这是一个坏主意，因为它破坏了标记和布局的分离。
你需要找到一个更好的例子，因为上面的问题的解决方案是使用
而不是
。目前我只能想象你关于属性选择器的问题很有趣：css-tricks.com/attribute-selectors
我也遇到了同样的问题。我正在做一些过渡和动画工作。 data-* 属性可用于存储元素的初始属性。我以为我可以用 CSS 访问那些存储的值，但似乎只能用 JS 来完成。
是的，它被称为 HTML 1.0。多年后人们发现混合文档结构和表示是一个坏主意，并将它们分成两部分：HTML 和 CSS。不难想象重新组合它们是一个坏主意。

标签： css html attributes

【解决方案1】：

确实有这种功能的预置，看http://www.w3.org/TR/css3-values/#attr-notation

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

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

不过，它确实适用于 content 的伪元素。

【讨论】：

这是css语法content: attr(data-content);跨浏览器吗？ IE8 之前可以用吗？
更新 - 这现在是浏览器中的一个可用功能。
@CaptainHypertext 根据caniuse.com的说法，该功能仍然广泛不受支持（伪元素的内容属性中的字符串除外）。 caniuse.com/#feat=css3-attr
@Zeus Zdravkov：这是什么逻辑？这个答案的全部 point 是代码不起作用 - 因为它首先不受支持。答案怎么错了？

【解决方案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%; }

注意：这有点离题，并不是您（或某人）真正想要的，但可能会有所帮助。

【讨论】：

未捕获的类型错误：无法在 main.js:1172 在 main.js:1179（匿名）@main.js:1172（匿名）@main.js:1179 09 处读取 null 的属性“长度” :02:48.363

【解决方案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。

【讨论】：