在CSS中将calc（）与attr（）结合起来[重复]

Posted

技术标签:

【中文标题】在CSS中将calc（）与attr（）结合起来[重复]【英文标题】：Combine calc() with attr() in CSS [duplicate] 【发布时间】：2013-12-27 17:56:38 【问题描述】：

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

    我做错了 尚不支持

怎么了？

Example Fiddle

【问题讨论】：

【参考方案1】：

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

【讨论】：

这是一个带有“内容”的示例：jsfiddle.net/cQ8F4/2 是的，不支持。您可以使用这样的 css 进行非动态处理：jsfiddle.net/cQ8F4/3 对于动态解决方案，我将使用 javascript 或 jQuery：jsfiddle.net/cQ8F4/4 截至 2018 年 5 月 19 日，这个答案大部分仍然是正确的，但链接的文档仅指出对 attr() 对 content 以外的属性的支持是实验性的。我建议参考the Can I use... page，因为如果/当浏览器开始支持这种用法时，它可能会更新。【参考方案2】：

似乎有办法解决它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 中可能习惯的漂亮的自动转换（@987654327 @).attr() 返回的是字符串，而不是数字，这可以通过添加 .content:after content:var(--x) 来查看；什么都不会打印，--x 是一个数字，content 接受字符串。

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

看起来在CSS4 中强制转换（嗯，解释） 将是一件事情，而且它会像

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

到目前为止，甚至没有浏览器支持这个实验性规范，但我会在支持时更新。

【讨论】：

这非常棒，即使没有 attr() 支持！它可以允许定义一些非常好的布局！ 仅供参考，IE 不支持 CSS 变量，Edge 正在慢慢实现。大多数其他浏览器都支持它们！ caniuse.com/#feat=css-variables 回顾这个和我对[it] seems to set all the widths to some really large number 的评论，它让我想到如果 CSS 不强制转换，它可能会尝试使用字符串 as 数字.所以我尝试将data-x="&amp;#x01;" 设置为1，&amp;#x02; 用于2 等等，但宽度根本没有设置。浏览器必须已修补以根本不尝试使用字符串变量。我想知道这在过去是否可行.. 我希望还为时不晚。对我来说，这也是一个有效的答案，因为 attr 倾向于是动态的，所以仍然需要 JS 来设置该属性的值。然后，我们可以设置内联样式，例如 element.setAttribute('style',`"--x: $x"`); 或者以相同的方式使用 textContent 修改样式元素。这将在支持 css vars 的浏览器中完美运行。 另外我们可以用这种方式转换calc单元：calc(1UNIT * (YOUR OPERATIONS) ) ex calc(1px * 16/9 )【参考方案3】：

目前 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>

【讨论】：

工作就像一个魅力！谢谢！

以上是关于在CSS中将calc（）与attr（）结合起来[重复]的主要内容，如果未能解决你的问题，请参考以下文章

在Python中将wav文件与空格结合起来

使用 CSS attr() 函数和数据标签进行动画计时

在 Swift 中将两个 NSPredicates 与独立的 NSSortDescriptors 结合起来

如何在 MYSQL 查询中将“LIKE”与“IN”结合起来？

在 T-SQL 中将变量表与单个变量结合起来

在 Python 多处理中将 Pool.map 与共享内存数组结合起来