Thymeleafのattr
Thymeleafでattrを使用してHTML属性を動的に設定するには、th:attr属性を使います。
th:attrは、HTMLタグに任意の属性を動的に追加または変更するためのものです。
基本的な使い方
以下は、th:attrを使ってHTML要素の属性を動的に設定する例です。
<a th:href="@{/path}" th:attr="title=${titleText}">リンク</a>
この例では、title属性が動的に設定されます。
${titleText}の部分は、サーバサイドから渡される変数で、動的に値が挿入されます。
th:attrの基本構文
<th:attr="属性名1=値1, 属性名2=値2, ...">
複数の属性を同時に設定することができます。
具体例
単一の属性を動的に設定
<img th:src="@{/images/logo.png}" th:attr="alt=${imageAltText}" />
ここでは、alt属性が動的に設定されています。
複数の属性を動的に設定
<a th:href="@{/path}" th:attr="title=${titleText}, target='_blank'">リンク</a>
この例では、title属性とtarget属性が同時に設定されています。
target属性は固定値として設定されています。
条件付きで属性を設定
Thymeleafでは、条件付きで属性を設定することも可能です。
<a th:href="@{/path}" th:attr="${isExternal} ? 'target=_blank' : ''">リンク</a>
この例では、isExternalがtrueの場合にのみ、target="_blank"が設定されます。
th:attrの利点
動的コンテンツの表示
サーバーサイドで生成されるデータを利用して、HTMLの属性を動的に変更できます。
条件付き属性の設定
条件に基づいて属性を設定したり、削除したりすることができます。
複数属性の同時設定
一つのth:attrで複数の属性を同時に設定することができます。
