使用HTML5数据属性的CSS值[复制]

This question already has an answer here:

这个问题已经有了答案:

CSS3's attr() doesn't work in major browsers 4 answers
CSS3的attr()在主流浏览器中不起作用。

width: attr(data-width);

I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.

我想知道是否有可能使用HTML5的数据来设置css值——属性与设置css内容的方式相同。目前它是行不通的。

HTML

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

CSS

div { width: attr(data-width) }

3 个解决方案

#1

There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation

实际上，对于这样的特性，我们有一个预览，看看http://www.w3.org/TR/css3-values/#attr-notation。

This fiddle should work like what you need, but will not for now.

这把小提琴应该像你需要的那样工作，但暂时不会。

Unfortunately, it's still a draft, and isn't fully implemented on major browsers.

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

It does work for content on pseudo-elements, though.

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

#2

You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/

您可以使用javascript创建一些css规则，您可以在以后的样式中使用这些规则: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 + "%");
}

This creates 100 pseudo-selectors like this:

这样就创建了100个伪选择器:

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

Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.

注意:这有点偏离主题，并不是你(或某人)想要的，但可能会有帮助。

#3

As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.

到今天为止，您可以在CSS3声明中读取一些来自HTML5数据属性的值。在CaioToOn的fiddle, CSS代码可以使用数据属性设置内容。

Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).

不幸的是，它并不适用于宽度和高度(在谷歌Chrome 35、Mozilla Firefox 30和Internet Explorer 11中测试过)。

But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.

但是Fabrice Weinberg有一个CSS3 attr()填充器，它为数据宽度和数据高度提供支持。你可以在这里找到GitHub上的回复:cssattr.js。

#1