ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 データ属性を使用して CSS 値を設定できますか?

HTML5 データ属性を使用して CSS 値を設定できますか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-07 03:33:03669ブラウズ

Can You Set CSS Values Using HTML5 Data Attributes?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。