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 ) は動作しません。その場合、次の 2 つのケースがあります。

  1. 間違えた
  2. まだサポートされていません

どうしたんだ？

フィドルの例

4

3 に答える 3

36

sを使用してそれを回避する方法があるようですvar

.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 に答える