48

我想知道我是否可以将 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 和 Firefox 25.0.1）它没有。那么有两种情况：

  1. 我做错了
  2. 尚不支持

这是怎么回事？

示例小提琴

4

3 回答 3

36

似乎有一种方法可以使用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 ( '2' * 3 //=6) 中习惯的漂亮的自动转换。
attr()返回一个字符串，而不是数字，这可以通过添加.content:after { content:var(--x) }; 什么都没有打印，--x 是一个数字，content接受字符串。

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

看起来强制转换（好吧，解释）将成为CSS4中的一件事，它就像

.content{
    width: calc(100px * attr(data-x number, 1));
    background: #f00;
}

迄今为止，甚至没有浏览器支持这个实验性规范，但当它支持时我会更新。

于 2016-11-26T07:04:31.503 回答
32

目前，默认情况下，任何主流浏览器都不支持 attr() 用于除“内容”之外的任何属性。在此处阅读更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/attr

于 2013-12-10T09:42:53.933 回答
20

目前 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>
于 2017-01-31T14:00:26.077 回答