使用 CSS attr() 设置宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18408488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting width with CSS attr()
提问by sheodox
I'm trying to set the width of an element using attr() in CSS but it's not working. Chrome says "invalid property value" but I'm not sure what's wrong.
我正在尝试在 CSS 中使用 attr() 设置元素的宽度，但它不起作用。Chrome 显示“无效的属性值”，但我不确定出了什么问题。
I'm trying to use the attribute "prog" as the width in percent for the .progress div.
我正在尝试使用属性“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 %);
}
回答by David says reinstate Monica
This is an experimental, or at least draft, feature of CSS, and currently, according to Mozilla Developer Network's documentation, is only compatible with the CSS contentproperty (in which it can return a string to be placed inside a pseudo-element), but cannot (yet) be used to generate values for other properties.
这是一个实验性的，或者至少是草案的 CSS 特性，根据 Mozilla Developer Network 的文档，目前仅与 CSScontent属性兼容（它可以返回一个字符串以放置在伪元素中），但是不能（还）用于为其他属性生成值。
References:
参考：
回答by user1429980
Actually, there is a way to get around the attr()solution:
实际上，有一种方法可以绕过attr()解决方案：
I don't recommend this, but you could account for every scenario of data-widthattribute, for example:
我不建议这样做，但您可以考虑data-width属性的每个场景，例如：
(stylus code)
（手写笔代码）
$limit = 300
.myClass
for num in (1...$limit)
&[data-width="${limit}"]
width $limit
Albeit, this is a terrible approach, and leads to waytoo much CSS. I just wanted to point out that there's always a way.
虽然，这是一个可怕的做法，导致的方式太多了CSS。我只是想指出，总有办法。
回答by Explosion Pills
Support for attributes other than content is Experimental. In other words, browsers do not support this yet even though it is seemingly valid.
对内容以外的属性的支持是实验性的。换句话说，即使它看起来有效，浏览器也不支持它。
Here is an exampleshowing that it does work with content, but not width.
这是一个示例，表明它确实适用于content，但不适用于width。
