Lou*_*pax 32 css css3 css-calc
我想知道我是否可以将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
.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));
}
该草案说,它应该工作,但对我来说器(Chrome 31.0.1650.63 m和火狐25.0.1),它没有.那么有两种情况:
这是怎么回事？
jed*_*ede 23
目前attr()默认情况下不支持任何主要浏览器中除"content"之外的任何属性.在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/CSS/attr
Has*_*own 18
.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*/
注释掉的部分应该是完美的,这可能是你的想法不起作用的原因,但似乎css没有执行你可能习惯于javascript('2' * 3 //=6)中的漂亮的自动转换.
attr()返回一个字符串,而不是一个数字,这可以通过添加来看到.content:after { content:var(--x) }; 什么都没有打印, - x是一个数字,content接受字符串.
如果有一些css函数可以投射,我觉得这将是这个问题的关键.
目前attr()函数在Chrome中不起作用.
一个几乎同样好的解决方案是使用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>