HTML5 データ属性を使用して CSS 値を直接割り当てることができますか?

HTML5 データ属性を使用した CSS 値へのアクセス

CSS では、attr() 関数を使用して HTML5 データ属性から値を取得できます。この機能は、HTML マークアップ内に保存されている情報に基づいて CSS プロパティを動的に制御する場合に役立ちます。

ただし、データ属性を使用して CSS 値を直接割り当てることは、以前は不可能でした。この機能が実装されているかどうかを確認するには、次の CSS コードを検査できます。

<code class="css">width: attr(data-width);</code>

このコードは、data-width 属性の値に基づいて要素の width プロパティを設定しようとします。この機能がサポートされている場合、幅は HTML で指定された値を反映する必要があります。

提供された HTML の例内:

<code class="html"><div data-width="600px"></div></code>

ブラウザがサポートしている場合、width プロパティは 600 ピクセルに拡張される必要があります。データ属性を使用して CSS 値を割り当てます。ただし、主要なブラウザの現在の実装では、この機能はサポートされていません。

幸いなことに、データ属性から CSS 値にアクセスする機能は、CSS3 値のドラフトで指定されています。その結果、将来のブラウザ バージョンでは完全なサポートが期待されます。

CSS 値の割り当てについてはまだ広くサポートされていないにもかかわらず、データ属性を使用して疑似要素のコンテンツを取得する機能は現在機能していることに注目してください。

以上がHTML5 データ属性を使用して CSS 値を直接割り当てることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。