CSSではこのようなことが可能ですか?
<table>
<tr>
<td id="elementOne">elementOne</td>
<td id="elementtwo">elementtwo</td>
</tr>
</table>
<div style="width: calc(document.getElementById(elementOne).width)"></div>
Divは常にelementOne
と同じ幅になります。
CSSにそのような機能があり、calc()または他の手段を使用していますか?
いいえ、CSSでは不可能です。
そのためには、JavaScript(document.getElementById(elementOne).offsetWidth
など、探している幅に応じて)を使用する必要があります。 Calcは、スクリプトを実行するのではなく、数学を実行するための sed です。あなたがやろうとしているように、CSSステートメントにJSを入れる方法はありません。
JSビットの詳細については、「 HTML要素の実際の幅と高さを取得する方法は? 」を参照してください。
編集:これがCSSに実装するのが悪い考えである理由の背景については、se CSSの値の計算 (TL; DR:試されました。物事は爆発しました)
CSS変数を使用します。
<style>
:root { --width: 100px; } /* Set the variable --width */
table td{
width: var(--width); /* use it to set the width of TD elements */
border: 1px solid;
}
</style>
<table>
<tr>
<td class="tab">elementOne</td>
<td class="tab">elementtwo</td>
</tr>
</table>
<!-- reuse the variable to set the width of the DIV element -->
<div style="width: var(--width); border: 1px solid;">Element three</div>
Calc()関数で変数を使用することもできます。
<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>
はい。 CSSを使用してこれを行うには、2つの方法があります(ただし、calcを使用しない場合)。
1)列の数がわかっている場合は、%を使用します(つまり、2列で50%)
2)列の数がわからない場合、または使用ケースに%を使用できない場合は、 flexbox を使用できます。ブラウザの互換性ターゲットに応じて、「古い」構文と「新しい」構文を組み合わせて、素晴らしい結果を得ることができます。