使用CSS设置宽度attr（） [英] Setting width with CSS attr()

问题描述

我试图使用attr（）在CSS中设置元素的宽度，但它不工作。 Chrome说无效的属性值，但我不确定是什么问题。

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.

我尝试使用属性prog作为百分比的宽度。

I'm trying to use the attribute "prog" as the width in percent for the .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 %);
}

推荐答案

CSS的至少草稿，功能，并且目前，根据Mozilla开发人员网络的文档，仅与CSS content 属性兼容（其中它可以返回一个字符串放置

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 content property (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.

参考文献：

• attr（）（在MDN）。


• attr（）（在W3C）。

• attr() (at MDN).
• attr() (at W3C).

这篇关于使用CSS设置宽度attr（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！