28

実行時に CSS の背景画像を変更するにはどうすればよいですか? 本文に次の背景画像がありますが、実行時に画像を変更できますか?

body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; 
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:normal; 
color:#404040;
line-height:20px; }
4

4 に答える 4

60

これには Javascript を使用する必要があります。background-imageこのように本体のスタイルを設定できます。

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';

URL を実際の URL に置き換えてください。

于 2012-06-03T02:46:29.173 に答える
22

JQuery が既に読み込まれている場合は、次のように実行できます。

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

編集：

最初に head タグに JQuery をロードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

次に、読み込みが終了したときなど、ページで何かが発生したときに、Javascript を呼び出して背景画像を変更します。

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>
于 2012-06-03T02:54:29.433 に答える
10

本体に onload 関数を設定するだけです:

<body onload="init()">

次に、javascript で次のようにします。

function init() {
  var someimage = 'changableBackgroudImage';
  document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}

'someimage' 変数を時間帯などの条件に応じて好きな値に変更すると、その画像が背景画像として設定されます。

于 2012-06-03T04:47:43.470 に答える