43

我正在尝试在 CSS 中使用 attr() 设置元素的宽度，但它不起作用。Chrome 说“无效的属性值”，但我不确定出了什么问题。

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

这是我在 codepen 上的示例。

<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 %);
}
4

4 回答 4

54

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

参考：

于 2013-08-23T17:31:46.443 回答
12

实际上，有一种方法可以绕过attr()解决方案：

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

（手写笔代码）

$limit = 300

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

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

于 2015-08-08T04:21:51.277 回答
3

对内容以外的属性的支持是 Experimental。换句话说，浏览器还不支持它，即使它看起来是有效的。

这是一个示例，显示它确实适用于content，但不适用于width。

于 2013-08-23T17:33:17.663 回答
2

实际上有一种方法可以使用 var() 从 html（或您的模板框架）获取属性/变量到 css（有关更多信息，请参阅本文）

.progress {
    width: var(--prog);
}

/* Rest of styling */
.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%;
}
<div class="progresscontainer">
    <div class="progress" style="--prog: 10%;"></div>
</div>

于 2022-01-10T12:25:55.703 回答