ThymeLeafにおけるJavaScriptでの背景色変更について

Question

こんにちは。
SpringBoot初学者なので拙いところもあると思いますが、よろしくお願いします。

実現したいこと

ThymeLeafにおいて、th:textがある要素をJavaScriptで取得してボタンが押された際に背景色を変えたいのですが、
普通のhtmlと違って色が変わるのが要素の左端のみになってしまいます（th:textはタグ内に記述されているため？）。

要素全体の背景色を変えるためにはth:styleが有効ですが、JavaScriptからThymeLeaf独自の属性名(th:~)をいじることは出来ますか？
それとも他に何か良い方法があるのでしょうか。

回答よろしくお願いします。

補足情報

Eclipse 2020 Java FullEdition
AmazonCorretto jdk15.0.2_7
SpringBoot 2.4.3
Windows10 Pro 1909

Comments

[m.ts10806]

ブラウザに表示されたhtmlがJavascriptの操作領域です

[K-actus]

＞th:textはタグ内に記述されているため？
ならばこの部分は勘違いで他に原因があるということですか？

[m.ts10806]

どんなコードを書いたのか知りませんが、th:はThymeleafのテンプレートエンジンとしてのタグ付であってブラウザ表示時にはコンパイルされて適切にhtmlに置き換えられたものが出力されます。
Javascriptはクライアントサイドの言語なのでコンパイル前の属性に対して指定はできません。

[K-actus]

なら自分の見当違いっぽいですね･･･。
他の原因を探してみます。

[m.ts10806]

かどうかは実際のコード見てみないと他人には何も言えません。

Answer 1

ThymeLeaf独自の属性(th:~)は、最終的に一般的なHTMLの属性などに変換されます。

例えば以下のThymeleafの記述は、

<div id="foo" th:style="'background-color: red'"></div>

最終的に以下のHTMLに変換されます。

<div id="foo" style="background-color: red"></div>

JavaScriptが操作するのは上のThymeleafファイルではなく、下の変換後のHTMLの方です。
なのでJavaScriptでth:~の属性自体はいじれませんが、変換後のHTMLのstyleを操作して背景色を変えることはできます。

上の例で言うなら、以下のJavaScriptで背景色を設定できます。

document.getElementById("foo").style.backgroundColor = "green";