JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMで背景画像を繰り返し表示しないように設定する方法

JavaScriptで背景画像を繰り返し表示しないようにスタイルを設定するには、backgroundRepeatプロパティを使用します。このプロパティを使うことで、ページ上の背景画像を繰り返すかどうかを動的に制御できます。

backgroundRepeatプロパティとは

backgroundRepeatプロパティは、CSSのbackground-repeatプロパティに相当するもので、JavaScriptから要素のスタイルを操作する際に利用します。「no-repeat」を設定すると、背景画像は要素内に1回だけ表示され、繰り返されなくなります。

なお、このプロパティには以下のような値を設定することもできます。

  • repeat：縦横両方向に繰り返し表示（デフォルト）
  • repeat-x：水平方向にのみ繰り返し表示
  • repeat-y：垂直方向にのみ繰り返し表示
  • no-repeat：繰り返しなしで1回だけ表示

実装例

以下のコードを実行すると、ボタンをクリックしたときに背景画像が設定され、繰り返し表示されなくなります。ぜひお試しください。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">クリックして背景画像を設定</button>
      <script>
         function display() {
            document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
            document.body.style.backgroundRepeat = "no-repeat";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルコードでは、まずボタンのonclickイベントでdisplay()関数を呼び出しています。関数内では、document.body.style.backgroundImageに画像のURLを指定して背景画像を設定し、続いてdocument.body.style.backgroundRepeatに「no-repeat」を指定することで、背景画像の繰り返し表示を無効にしています。

このように、JavaScriptのstyleオブジェクトを利用すれば、CSSで定義するのと同じプロパティをキャメルケース（backgroundRepeatなど）の形式で記述することにより、動的にスタイルを変更できます。

  1. JavaScriptで画像をプリロード（先読み）する方法をわかりやすく解説

    画像のプリロードとは？ Webページの表示速度やUX（ユーザー体験）を向上させるテクニックの一つに「画像のプリロード（先読み）」があります。これは、ユーザーが実際に画像を目にする前に、あらかじめブラウザに画像を読み込ませておく処理のことです。スライドショーやギャラリー、ホバー時に画像を切り替えるボタンなど、後から素早く画像を表示したい場面で特に効果的です。 JavaScriptによる基本的なプリロードの方法 JavaScriptでは、Imageオブジェクトを生成してsrcプロパティにURLを設定するだけで、簡単に画像を先読みできます。 function preloadImage(url) {

  2. HTML DOMのbackgroundプロパティとは？使い方と値を徹底解説

    backgroundプロパティとはHTML DOMのbackgroundプロパティは、要素に関連付けられた背景画像や背景色を設定・取得するために使用されるプロパティです。ショートハンド（一括指定）プロパティとして機能し、最大8つの個別プロパティをまとめて操作できるのが特徴です。構文backgroundプロパティを設定する際の構文は以下のとおりです。object.style.background = color image repeat attachment position size origin clip|initial|inherit指定できる値の一覧backgroundプロパティには、以