CSSの変数を取得し、HTMLに反映したい
やりたい事現在CSSで、--〇〇で定義、var(--〇〇)で使用している変数の値を文字列に変換し、content: ""を使用してHTMLに書き出す事は可能？もしできない場合、CSSで計算した座標位置等の数値をリアルタイムにHTMLに表示する方法は何かない？回答今のところ、CSSで定義されたカスタムプロパティ（変数）を文字列として直接HTMLに出力する方法はありません。CSSのカスタムプロパティはスタイリングのために使われるもので、HTMLに出力するための機能は持っていないからです。そこで代案をメモ。代替案1: JavaScriptを使うCSS変数をJavaScriptで取得し、HTMLに挿入するのが一般的な方法です。例えば、CSSで定義された変数をJavaScriptで読み取り、それをHTMLに表示させることができます。まずCSSで変数を下記のように定義:root { --my-var: "Hello, World!";}次にJavaScriptでその変数を取得し、HTMLに書き出す<p id="output"></p><script> const root = getComputedStyle(document.documentElement); const myVar = root.getPropertyValue('--my-var').trim(); document.getElementById('output').textContent = myVar;</script>※getComputedStyle を使うことで、CSSから変数を読み込んで、その値をHTMLに挿入することができる。代替案2: CSSで計算した数値をHTMLに表示するCSS内で座標や計算結果を求めて、それをリアルタイムでHTMLに表示するには、やはりJavaScriptの力が必要になります。jsを使用して座標をリアルタイムに表示する方法<p id="position"></p><div class="box" style="width: 100px; height: 100px; position: relative;"></div><script> const box = document.querySelector('.box'); const positionDisplay = document.getElementById('position'); box.addEventListener('mousemove', (event) => { const x = event.clientX; const y = event.clientY; positionDisplay.textContent = `X: ${x}, Y: ${y}`; });</script>このように、CSSのスタイル情報や計算結果をHTMLに表示させる際には、やはりJavaScriptが欠かせないので、CSS単体では難しいようです。
