在CSS中将calc()与attr()结合使用

时间:2013-12-10 09:34:41

标签: 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));
}

draft表示它应该可以使用,但在我的情况下(Chrome 31.0.1650.63 m和Firefox 25.0.1)它没有。那么有两种情况:

  1. 我做错了
  2. 目前尚不支持
  3. 这笔交易是什么?

    Example Fiddle

3 个答案:

答案 0 :(得分:22)

现在attr()默认情况下不支持任何主要浏览器中除“content”之外的任何属性。在此处阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/CSS/attr

答案 1 :(得分:16)

似乎有办法using 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*/

注释掉的部分本来是完美的,这可能是你的想法不起作用的原因,但似乎css没有执行你在javascript中可能习惯的漂亮的自动转换({{ 1}})。
'2' * 3 //=6会返回一个字符串,而不是一个数字,这可以通过添加attr()来看到;没有打印, - x是一个数字,.content:after { content:var(--x) }接受字符串。

如果有一些css函数可以投射,我觉得这将是解决这个问题的关键。

看起来像(嗯,解释)似乎是CSS4中的一个东西,它就像

一样简单
content

到目前为止,没有任何浏览器支持这个实验规范,但我会更新它。

答案 2 :(得分:6)

此时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>