使用 HTML5 数据属性的 CSS 值 [英] CSS values using HTML5 data attribute

问题描述

width: attr(data-width);

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

<小时>

HTML

CSS

div { width: attr(data-width) }

解决方案

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

这个 fiddle 应该可以像您需要的那样工作，但暂时不会.>

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

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

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.

---

HTML

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

CSS

div { width: attr(data-width) }

解决方案

There is, indeed, prevision for such feature, look 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.

这篇关于使用 HTML5 数据属性的 CSS 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！