在 CSS 中结合 calc() 和 attr()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20490704/
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
Combine calc() with attr() in CSS
提问by Loupax
I was wondering whether I can combine the calc() function with the attr() function to achieve something like the following:
我想知道我是否可以将 calc() 函数与 attr() 函数结合起来实现如下所示：
<div class="content" data-x="1">
This box should have a width of 100px
</div>
<div class="content" data-x="2">
This box should have a width of 200px
</div>
<div class="content" data-x="3">
This box should have a width of 300px
</div>
CSS
CSS
.content{
//Fallback. If no calc is supported, just leave it at 100px
width: 100px;
}
.content[data-x]{
// Multiply the width of the element by the factor of data-x
width: calc(100px * attr(data-x));
}
The draftsays it should work, but in my case (Chrome 31.0.1650.63 m and Firefox 25.0.1 ) it doesn't. There are two cases then:
该草案说，它应该工作，但对我来说器（Chrome 31.0.1650.63 m和火狐25.0.1），它没有。那么有两种情况：
- I did it wrong
- It is not supported yet
- 我做错了
- 尚不支持
Whats the deal?
这是怎么回事？
采纳答案by jede
Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr
现在，对于除“内容”以外的任何属性，任何主要浏览器默认都不支持 attr()。在此处阅读更多相关信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/attr
回答by Hashbrown
There appears to be a way around it using vars
似乎有一种方法可以使用vars
.content{
--x: 1;
width: calc(100px * var(--x));
background: #f00;
}
[data-x="1"] { --x: 1; }
[data-x="2"] { --x: 2; }
[data-x="3"] { --x: 3; }
/*doesn't look like this works unfortunately
[data-x] { --x: attr(data-x); }
seems to set all the widths to some really large number*/
The commented out section would have been perfect, and this may be the very same reason your idea didn't work, but it seems css doesn't perform the nice automatic casting that you might be used to in javascript ('2' * 3 //=6).attr()returns a string, not a number, and this can be seen by adding .content:after { content:var(--x) }; nothing gets printed, --x is a number, contentaccepts strings.
注释掉的部分本来是完美的，这可能与您的想法不起作用的原因非常相似，但似乎 css 没有执行您可能在 javascript ( '2' * 3 //=6) 中习惯的漂亮的自动转换。attr()返回一个字符串，而不是一个数字，这可以通过添加.content:after { content:var(--x) }；没有打印任何内容，--x 是一个数字，content接受字符串。
If there is some css function to cast I feel like that would be the key to this problem.
如果有一些 css 函数可以转换，我觉得这将是解决这个问题的关键。
Looks like casting (well, interpreting)will be a thing in CSS4, and it'll be as simple as
看起来铸造（嗯，解释）将成为CSS4 中的一件事，它会像
.content{
width: calc(100px * attr(data-x number, 1));
background: #f00;
}
To date, no browsers support even this experimental spec, but I'll update when it does.
迄今为止，没有浏览器甚至支持这个实验性规范，但我会在它支持时更新。
回答by Simon Rigét
At the moment the attr() function isn't working in Chrome.
目前 attr() 函数在 Chrome 中不起作用。
An almost as nice solution is to use CSS variables:
一个几乎同样好的解决方案是使用 CSS 变量：
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 100px;
--data-x:1; /* Default value */
}
.content{
width: calc(var(--module-size) * var(--data-x));
border: 1px solid;
}
</style>
</head>
<body>
<div class="content" style="--data-x:1">
This box should have a width of 100px
</div>
<div class="content" style="--data-x:2">
This box should have a width of 200px
</div>
<div class="content" style="--data-x:3">
This box should have a width of 300px
</div>
</body>
</html>
