Thymeleaf教程 设置属性值

<div  th:style="|height: 860px; background: url(${application.config.indexImage});  |">
	

Thymeleaf属性列表

有很多这样的属性,它们每个都针对特定的XHTML或HTML5属性: 

th:abbr 

th:accept 

th:accept-charset 

th:accesskey 

th:action 

th:align 

th:alt 

th:archive 

th:audio 

th:autocomplete 

th:axis 

th:background 

th:bgcolor 

th:border 

th:cellpadding 

th:cellspacing 

th:challenge 

th:charset 

th:cite 

th:class 

th:classid 

th:codebase 

th:codetype 

th:cols 

th:colspan 

th:compact 

th:content 

th:contenteditable 

th:contextmenu 

th:data 

th:datetime 

th:dir 

th:draggable 

th:dropzone 

th:enctype 

th:for 

th:form 

th:formaction 

th:formenctype 

th:formmethod 

th:formtarget 

th:frame 

th:frameborder 

th:headers 

th:height 

th:high 

th:href 

th:hreflang 

th:hspace 

th:http-equiv 

th:icon 

th:id 

th:keytype 

th:kind 

th:label 

th:lang 

th:list 

th:longdesc 

th:low 

th:manifest 

th:marginheight 

th:marginwidth 

th:max 

th:maxlength 

th:media 

th:method 

th:min 

th:name 

th:optimum 

th:pattern 

th:placeholder 

th:poster 

th:preload 

th:radiogroup 

th:rel 

th:rev 

th:rows 

th:rowspan 

th:rules 

th:sandbox 

th:scheme 

th:scope 

th:scrolling 

th:size 

th:sizes 

th:span 

th:spellcheck 

th:src 

th:srclang 

th:standby 

th:start 

th:step 

th:style 

th:summary 

th:tabindex 

th:target 

th:title 

th:type 

th:usemap 

th:value 

th:valuetype 

th:vspace 

th:width 

th:wrap 

th:xmlbase 

th:xmllang 

th:xmlspace

同时设置多个属性值

<img src="../../images/gtvglogo.png"

th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

1

2

或者这样

<img src="../../images/gtvglogo.png"

th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

1

2

追加后面和追加前面的属性

th:attrappend 后面追加

th:attr 

前面追加

例如：cssStyle=warning，追加后面

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

1

即为

<input type="button" value="Do it!" class="btn warning" />

1

这里还有两种类似的特殊属性th:classappend 和th:styleappend

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

1

固定值，boolean属性

有一些特殊属性的值是固定的。比如checked：

<input type="checkbox" name="option1" checked="checked" />

<input type="checkbox" name="option2" />

1

2

用法：

<input type="checkbox" name="active" th:checked="${user.active}" />

1

固定值，boolean类型属性列表如下：

th:async

th:autofocus

th:autoplay

th:checked

th:controls

th:declare

th:default

th:defer

th:disabled

th:formnovalidate

th:hidden

th:ismap

th:loop

th:multiple

th:novalidate

th:nowrap

th:open

th:pubdate

th:readonly

th:required

th:reversed

th:scoped

th:seamless

th:selected

html5的data语法支持

属性可以在HTML5中用这种方式写：data-{prefix}-{name}

<table>

<tr data-th-each="user : ${users}">

<td data-th-text="${user.login}">...</td>

<td data-th-text="${user.name}">...</td>

</tr>

</table>