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; }
        (...)

想法？

修改

我找到了possible duplicate

Answer 1

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

<强> Fiddle

$("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>

来自data- *属性的CSS规则

修改

2 个答案: