備忘録的プログラミングリファレンス

attr() ファンクション

 attr() ファンクションは、タグエレメントの属性値を取得する CSS のファンクションです。
 取得した属性値はスタイルシートの設定として反映することができます。HTML テキストにスタイルシートで利用する値を指定することができます。

 以下は、HTML テキスト内で色や装飾を指定する例です。

attr() ファンクション
<div class="example" bgcolor="silver">
<p>Example text.</p>
</div>

<style>
div.example{
	background-color: attr( bgcolor color );
}
</style>

詳しくは Example を参照してください

  タグエレメントの任意の属性値、<a> の href 属性、<time> の datetime 属性といった値を表示することができます。

 値に、color や url といったその型を指定することでスタイシートの値として活用するように定義されてされていますが出来ないようです。詳しくは以下の Example を参照してください。

ページ内 Index

構文(Syntax)

CSS

attr( string )

引数

 引数のタグエレメントの属性名です。取得できる値は String で、スタイルシートの指定値としては使えません。

Example

 以下は attr() ファンクションの例です。タグエレメントの属性値をスタイルシートに反映するや、 color や href といった型変換を通して活用することはできないようです。

タグエレメントから属性値をスタイルシートに活用

 タグエレメントの任意の属性値をスタイルシートの値として利用する例です。

*値に、color や url といったその型を指定することでスタイシートの値として活用するように仕様にありますが出来ないようです。

タグエレメントの任意の属性値

 以下の例は、<img> にタイトルを表示する例です。

<a>の href 属性の表示

 <a> の href 属性の値を追加表示しています。

<time>の datetime 属性の表示

 <time> の datetime 属性の値を追加表示しています。