Question

我正在尝试使用CSS中的attr（）来设置元素的宽度，但它不起作用。 Chrome说“无效的财产价值”，但我不确定是什么问题。

我正在尝试使用属性“prog”作为.progress div的宽度百分比。

<div class="progresscontainer">
    <div class="progress" prog="10">
    </div>
</div>

.progresscontainer {
    position:absolute;
    background-color:black;
    width:500px;
    height:100px;
    border-radius:5px;
    border:1px solid black;
    overflow:hidden;
}
.progress {
    background-color: green;
    background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    position:absolute;
    height:100%;
    width: attr(prog %);
}

Answer 1

这是CSS的一个实验性或至少是草稿的功能，目前，根据Mozilla Developer Network的文档，它只与CSS content属性兼容（在其中可以返回要放置的字符串）在一个伪元素内部，但不能（还）用于为其他属性生成值。

参考文献：

attr() (at MDN)。
attr() (at W3C)。

Answer 2

实际上，有办法绕过attr()解决方案：

我不建议这样做，但您可以考虑data-width属性的每个方案，例如：

（手写笔代码）

$limit = 300

.myClass
    for num in (1...$limit)
        &[data-width="${limit}"]
            width $limit

虽然，这是一种糟糕的方法，并导致方式过多的CSS。我只想指出，总有办法。

Answer 3

Support for attributes other than content is Experimental。换句话说，浏览器即使看似有效，也不支持此功能。

Here is an example表明它可以与content配合使用，但不能与width配合使用。

使用CSS attr（）设置宽度

3 个答案: