css - 来自 data-* 属性的 CSS 规则

Question

假设我的 HTML 文件的一部分如下所示：

<div data-w="20px">
    <p>this is some text this is some text this is some text</p>
</div>

并且<div>的宽度应该等于data-w，如下图所示。

div { width:[data-w]; }

我知道我可以[attribute]用作选择器，但老实说，这不是替代方案：

div[data-w=1px]{ width:1px; }
div[data-w=2px]{ width:1px; }
div[data-w=3px]{ width:1px; }
div[data-w=4px]{ width:1px; }
div[data-w=5px]{ width:1px; }
div[data-w=1px]{ width:1px; }
div[data-w=1px]{ width:1px; }
        (...)

想法？

编辑

我发现了一个可能的重复项

Answer 1

我想最简单的方法是使用 jQuery。

小提琴。

$("div").each(function() {
    var w = $(this).data("w");
    var $this = $(this);

    $this.width(w);
});​

正如评论中所说，这在单纯的 CSS 中是不可能的。

Answer 2

我想，因为您正在对宽度进行硬编码，所以最好使用：

<div style="width:20px">
    <p>this is some text this is some text this is some text</p>
</div>