onsen-UIでの背景の変更


onsen-UIでのCSSで

[code]

    .page__background {
      background:url('../images/title_img.jpg') no-repeat;
      background-size: auto 80%;
      background-position: center;
    }
    
[/code]

このように背景を設定しているのですが、  
この背景画像を変更するには、どのようなJavascriptを作成すればよいのでしょうか?




話を簡潔にするためにjQueryを導入している前提で書きます。

## styleを直接書き換える方法

DOMのプロパティを直接書き換える方法です。urlは絶対パスにするか、htmlからの相対パスを指定してください。

[code]

    $('.page__background').css('backgroundImage', 'url("pass/to/image")');
    
[/code]

* * *

## クラスを付与する方法

背景画像差し替え用のスタイル定義を用意し、JavaScriptではクラスの付与のみを行う方法です。近年はDOMを直接書き換えることはあまり推奨されませんので、こちらの方法をおすすめしておきます。

[code]

    .page__background {
      background:url('../images/title_img.jpg') no-repeat;
      background-size: auto 80%;
      background-position: center;
    }
    .page__background--bg2 {
      background-image:url('pass/to/image');
    }
    
[/code]

[code]

    $('.page__background').addClass('page__background--bg2');
    
[/code]




話を簡潔にするためにjQueryを導入している前提で書きます。

## styleを直接書き換える方法

DOMのプロパティを直接書き換える方法です。urlは絶対パスにするか、htmlからの相対パスを指定してください。

[code]

    $('.page__background').css('backgroundImage', 'url("pass/to/image")');
    
[/code]

* * *

## クラスを付与する方法

背景画像差し替え用のスタイル定義を用意し、JavaScriptではクラスの付与のみを行う方法です。近年はDOMを直接書き換えることはあまり推奨されませんので、こちらの方法をおすすめしておきます。

[code]

    .page__background {
      background:url('../images/title_img.jpg') no-repeat;
      background-size: auto 80%;
      background-position: center;
    }
    .page__background--bg2 {
      background-image:url('pass/to/image');
    }
    
[/code]

[code]

    $('.page__background').addClass('page__background--bg2');
    
[/code]

