24335


onsen-UIでのCSSで

[code]

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

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


CC BY-SA 3.0
2016-04-25T10:06:17.377
24331
2016-04-25T13:06:54.143
2016-04-25T11:41:02.763
8532
8234
question
javascript onsen-ui css
onsen-UIでの背景の変更


話を簡潔にするために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]


CC BY-SA 3.0
2016-04-25T12:35:36.413
24335
2016-04-25T13:06:54.143
2020-06-17T08:14:45.997
-1
8532
24331
answer