ホームページ > 記事 > ウェブフロントエンド > HTML5 データ属性を使用して CSS 値を設定できますか?
HTML5 データ属性を使用した CSS 値の設定
最近、HTML5 のデータ属性を使用して CSS 値を設定する可能性について疑問が生じました。質問で述べたように、「attr(data-width)」表記を使用して「width」などの CSS プロパティを設定しようとしても、現在は機能しません。
ただし、W3C CSS Values and Units Module Level 3 (CSS3) Values) には、https://www.w3.org/TR/css3-values/#attr-notation で説明されているように、この機能の規定が含まれています。
理論的には、次のようなコードが機能するはずです。 :
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
残念ながら、この機能は標準の一部であるにもかかわらず、はまだドラフト形式であり、主要なブラウザには完全には実装されていません。ただし、疑似要素にコンテンツを設定する場合は機能します:
CSS
input::before { content: attr(data-placeholder) }
以上がHTML5 データ属性を使用して CSS 値を設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。