ボタンで背景を変更する

私は、ユーザーが再レイアウトボタンをクリックすると、自分のフォルダに保存されている画像に背景が変わるようにしようとしています。ボタンで背景を変更する

HTMLボタン

<a href="#" onclick="changeLook()">ReStyle</a> 
<a href="#" onclick="changeBack()">Reset</a>

：しかし、私はそれが仕事を得る傾ける何らかの理由で、任意のヘルプは、この問題に素晴らしいことだ、私はいくつかあり、その後、あなたは、通常のイメージにリセットするかを選択することができます

Javascriptを

var counter = 0; 
function changeLook(){ 
    counter += 1; 
    switch (counter) { 
     case 1: 
      document.body.style.backgroundImage = "../Image/BackgroundImage2.jpg"; 
      break; 
     case 2: 
      document.body.style.backgroundImage = "../Image/BackgroundImage3.jpg"; 
      break; 
     case 3: 
      counter = 0; 
      document.body.style.backgroundImage = "../Image/BackgroundImage4.jpg"; 
      break; 
    } 
} 

function changeBack(){ 
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg"; 
}

CSS

body { 
    padding-top: 23px; 
    padding-bottom: 10px; 
    background: url('../Image/BackgroundImage1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

出典

2016-04-30 Nevershow2016

JavaScriptイメージパスで '../'を削除してみます。 – Aziz

プロジェクトのディレクトリ構造はどのようになっていますか？ –

うん、私はうんち、単純にうまくいきません。私は正しい薬用量を持っています。エラーもありません。本当に奇妙です。 – Nevershow2016

同じようurl(画像パス)を追加します。

document.body.style.backgroundImage = "url(../Image/BackgroundImage2.jpg)";

var counter =0; 
 
function changeLook() { 
 
    counter += 1; 
 

 
    switch (counter) { 
 
     case 1: 
 
      document.body.style.backgroundImage = "url(http://placehold.it/200x200)"; 
 
      break; 
 
     case 2: 
 
      document.body.style.backgroundImage = "url(http://placehold.it/300x300)"; 
 
      break; 
 
     case 3: 
 
      counter = 0; 
 
      document.body.style.backgroundImage = "url(http://placehold.it/400x400)"; 
 
      break;   
 
    } 
 
} 
 

 
function changeBack(){ 
 
    document.body.style.backgroundImage = "url(http://placehold.it/200x200)"; 
 
}

body { 
 
    padding-top: 23px; 
 
    padding-bottom: 10px; 
 
    background: url('http://placehold.it/200x200') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<a href="#" onclick="changeLook()">ReStyle</a> 
 
<a href="#" onclick="changeBack()">Reset</a>

出典

2016-04-30 20:16:05

これは実際に正しい答えに近づいていますが、今は背景が灰色になります – Nevershow2016

バックグラウンドそれ自体は、grreyに行くので、全く背景なし – Nevershow2016

私は使用する必要はありませんいくつかのresaonのために仕事を得ました../しかしファイルパスuはとにかく感謝xxに戻らなければなりません – Nevershow2016

あなたの現在のコードは絶対に使用できます。動作していない場合は、backgroundプロパティのCSSファイル内の相対パスが正しくない可能性があります。

CSSファイル内で使用されるパスは、CSSファイル自体に相対的で、参照先ではないものがであることを覚えておくことが重要です。ただし、Javascriptコードで相対参照を使用すると、Javascriptが参照されている場所（HTMLドキュメント）に対して相対参照が行われます。その後、

body.background1 { 
    background: url('../Images/Image1.jpg'); 
} 
body.background2 { 
    background: url('../Images/Image2.jpg'); 
} 
/* Continue as necessary */

単にJavascriptを使用して<body>要素のクラスを更新します：あなたはこれらの変更を処理するためにCSSスタイルを定義することを検討することをお勧めします

// Use the counter to determine which style to apply 
switch (counter) { 
    case 1: 
     document.body.className = "background1"; 
     break; 
    case 2: 
     document.body.className = "background2"; 
     break; 
    case 3: 
     counter = 0; 
     document.body.className = "background3"; 
     break;   
}

例

see a very basic example of this hereとすることができます。

出典

2016-04-30 20:11:50

_「JavaScriptが定義されている場所に相対的に作られます」_ HTMLドキュメント** _ – Turnip

はい、私は定義されているのではなく、参照されることを前提としています.JavascriptはHTMLドキュメントから参照され、相対的に参照されるためです。私は言葉を更新しました。 –

フィードバックのおかげで、私はこれを試してみましたが、うまくいきませんでした。本当に奇妙です。 – Nevershow2016

ファイルパスを間違って参照している可能性があります。ブラウザ内のデベロッパーコンソールを確認してください。 404エラーが表示されますか？

また、あなたはモジュラスを使用してchangeLook機能を簡素化することができます：

var counter = 1; 
function changeLook(){ 
    counter = counter % 4 + 1; 
    document.body.style.backgroundImage = "../Image/BackgroundImage" + counter + ".jpg"; 
} 

function changeBack() { 
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg"; 
}

出典

2016-04-30 20:15:06

ボタンで背景を変更する

答えて

関連する問題