CSSで読み込むファイルを動的に指定したい

Question

現在、次のようなコードが書いてあるテンプレートを使用しています。

.owl-theme .owl-controls .owl-page:nth-child(1) {
    background: url(test1.png) center ;
    background-size: 100px 100px;
}
.owl-theme .owl-controls .owl-page:nth-child(2) {
    background: url(test2.png) center;
    background-size: 100px 100px;
}
.owl-theme .owl-controls .owl-page:nth-child(3) {
    background: url(test3.png) center;
    background-size: 100px 100px;
}

ここで、読み込む画像ファイル（test1.png, test2.png, test3.png）をHTMLから動的に変更したいのですが、カスタムプロパティを使ったところ"EXPECTED RBRACE"というエラーが出てしまいうまく行きません...

この処理をJavaScriptで実装するとしたら、どのように書けばいいでしょうか。

Answer 1

JavaScript で行う場合、 data-* 属性へ画像の URL を入れておき、それを JavaScript で各要素の background-image プロパティへ設定することで実現出来ます (動作確認用リンク)。

<div class="owl-controls">
  <div class="owl-page" data-image="http://placehold.jp/ffa/ffffff/150x150.png?text=%20"></div>
  <div class="owl-page" data-image="http://placehold.jp/faf/ffffff/150x150.png?text=%20"></div>
  <div class="owl-page" data-image="http://placehold.jp/faa/ffffff/150x150.png?text=%20"></div>
</div>

.owl-controls {
  display: flex;
}

.owl-page {
  flex: 1;
  height: 50vh;
  background-position: center;
  background-size: 100px 100px;
}

const list = document.getElementsByClassName("owl-page");

for (const e of list) {
  e.style.backgroundImage = `url(${e.dataset.image})`;
}

または、画像の URL を含む url 関数を各要素の style 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます (動作確認用リンク)。

<div class="owl-controls">
  <div class="owl-page" style="--background: url(http://placehold.jp/ffa/ffffff/150x150.png?text=%20)"></div>
  <div class="owl-page" style="--background: url(http://placehold.jp/faf/ffffff/150x150.png?text=%20)"></div>
  <div class="owl-page" style="--background: url(http://placehold.jp/faa/ffffff/150x150.png?text=%20)"></div>
</div>

.owl-controls {
  display: flex;
}

.owl-page {
  flex: 1;
  height: 50vh;
  background-image: var(--background);
  background-position: center;
  background-size: 100px 100px;
}

---

CSS Values and Units Level 3 によれば、 attr 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように data-* 属性と attr 関数を使い、より簡潔に質問者さんの実現したいことが行えます (動作確認用リンク)。しかし、動作確認用リンクを見るとわかるように、**この機能に現在対応しているブラウザは存在しない**ため、現状は上記の二つのどちらかのような方法を選択することになります。

§ 9.2. Attribute References: attr()

The attr() function is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.

<div class="owl-controls">
  <div class="owl-page" data-image="http://placehold.jp/ffa/ffffff/150x150.png?text=%20"></div>
  <div class="owl-page" data-image="http://placehold.jp/faf/ffffff/150x150.png?text=%20"></div>
  <div class="owl-page" data-image="http://placehold.jp/faa/ffffff/150x150.png?text=%20"></div>
</div>

.owl-controls {
  display: flex;
}

.owl-page {
  flex: 1;
  height: 50vh;
  background-image: attr(data-image url);
  background-position: center;
  background-size: 100px 100px;
}

Comments

[yaoriku_ava]

ご丁寧な回答、本当にありがとうございます！！
早速やってみようと思います。