クリックでスタイルが適用されない

Question

前提・実現したいこと

クリックで背景適用をしたいのですが、そのときに指定したスタイルが適用されません。

発生している問題・エラーメッセージ

document.querySelector('.title').style.borderBottom='1px solid #FFF'; のところの、下線の色変更が適応されません。

該当のソースコード

<h3 class="title">Title 01</h3>
<div>
  <div class="aspect-box spinner">
    <img alt="" class="lazyload" src="xx01.png" onclick="document.body.style.backgroundImage='url(xx01.png)'; document.body.style.backgroundSize='500px 500px'; document.body.style.color='#FFF'; document.querySelector('.title').style.borderBottom='1px solid #FFF';">
  </div>
  <div class="align-center">0044</div>
</div>
<div>
  <div class="aspect-box spinner">
    <img alt="" class="lazyload" src="xx02.png" onclick="document.body.style.backgroundImage='url(xx02.png)'; document.body.style.backgroundSize='500px 500px'; document.body.style.color='var(--text)';  document.querySelector('.title').style.borderBottom='1px solid var(--text)';">
  </div>
  <div class="align-center">0035-02</div>
</div>

:root {
  --text: #1e1e1e;
}
.aspect-box img {
  margin: 2rem .5rem;
  display: inline-block;
  width: 150px; 
  height: 150px;
}
.title {
  border-bottom: 1px solid var(--text);
}

試したこと

<div>
  <div class="aspect-box spinner">
    <img alt="" class="lazyload" src="xx01.png" onclick="document.body.style.backgroundImage='url(xx01.png)'; document.body.style.backgroundSize='500px 500px'; document.body.style.color='#FFF'; document.querySelectorAll('.title')[0].style.borderBottom='1px solid #FFF';">
  </div>
  <div class="align-center">0044</div>
</div>

一番目しか下線の色が変更されませんでした。

<div>
  <div class="aspect-box spinner">
    <img alt="" class="lazyload" src="xx01.png" onclick="document.body.style.backgroundImage='url(xx01.png)'; document.body.style.backgroundSize='500px 500px'; document.body.style.color='#FFF'; let target = document.querySelector('.title'); for(let i in target){ if (target.hasOwnProperty(i)) { target[i].style.borderBottom='1px solid #FFF';}}">
  </div>
  <div class="align-center">0044</div>
</div>

変化なしでした。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版,
Safari 604.1

Comments

[m.ts10806]

試したことが「よくわかりませんでした」とは誰に何を伝えたいのでしょうか。
起きた問題に対して調べたことや試したことを記載するもののはずですが

[itagagaki]

問題が再現できませんでした。
「該当のソースコード」のHTMLとCSSで、最初の画像をクリックすると、Title 01の下線が白に変わりましたよ。

Answer 1

<div>
  <div class="aspect-box spinner">
    <img alt="" class="lazyload" src="xx01.png" onclick="document.body.style.backgroundImage='url(xx01.png)'; document.body.style.backgroundSize='500px 500px'; document.body.style.color='#FFF'; document.querySelector('.title').style.borderBottom='1px solid #FFF'; let target = document.querySelectorAll('.short-title'); for(let i in target){ if (target.hasOwnProperty(i)) { target[i].style.borderBottom='1px solid #FFF'; }};">
  </div>
  <div class="align-center">0044</div>
</div>

querySelectorAll で全ての値を取得したところ、上手く全部の下線を変えられました。