ここから本文です

cssでは .box{ background-image:url("A.png"); } HTMLで 〈body class="class"〉...

sha********さん

2019/4/2021:38:18

cssでは
.box{
background-image:url("A.png");
}
HTMLで
〈body class="class"〉〈/body〉でWebページの背景をA画像にしているのですが、JavaScriptを使ってwebページの背景の画像Aを画像Bに変えたいのですが、ど

のような関数を作ればよいのでしょうか

具体的な例としてはゲームなどで一定の点数を稼いだら背景を変える動的な関数を使用したいのです

閲覧数:
23
回答数:
3
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2019/4/2301:38:17

■■■ 方法1:クラス名を変える ■■■


入れ替える画像の枚数が少ない場合は、
class 名を変更することで背景画像を変更するのが簡単。
例えば、

────────────────
.back1{
background-image: url( "A.png" );
}
.back2{
background-image: url( "B.png" );
}
────────────────

のように2つのクラスを用意しておいて、
Javascript では、

────────────────
// 10 点以下なら A.png、10 点以上なら B.png
document.body.className = ( score < 10 ) ? "back1" : "back2" ;
────────────────

のように三項演算子 ? でクラス名を分岐すると楽。

────────────────
.back1{
background-image: url( "A.png" );
}
.back2{
background-image: url( "B.png" );
}
.back3{
background-image: url( "C.png" );
}
.back4{
background-image: url( "D.png" );
}
────────────────

のように、
たとえば4段階で変化させる場合も、

────────────────
// 10 点おきに画像を変える
document.body.className =
( score < 10 ) ? "back1" :
( score < 20 ) ? "back2" :
( score < 30 ) ? "back3" :
"back4" ;
────────────────

のように三項演算子 ? を連結すれば簡単に分岐できる。



■■■ 方法2:直接 background-image を変更 ■■■


切替える画像の数が多い場合は、
画像の分だけクラスを定義するのは大変なんで、
画像リストを配列にしておいて、
background-image に指定する値を分岐させると楽。


────────────────
// 画像リスト
var list = [
"A.png",
"B.png",
"C.png",
"D.png",
"E.png",
"F.png",
"G.png"
];

// 10 点おきに画像を変える
document.body.style.backgroundImage =
( score < 10 ) ? "url( '"+list[ 0 ]+"' )" :
( score < 20 ) ? "url( '"+list[ 1 ]+"' )" :
( score < 30 ) ? "url( '"+list[ 2 ]+"' )" :
( score < 40 ) ? "url( '"+list[ 3 ]+"' )" :
( score < 50 ) ? "url( '"+list[ 4 ]+"' )" :
( score < 60 ) ? "url( '"+list[ 5 ]+"' )" :
"url( '"+list[ 6 ]+"' )" ;
────────────────

画像のパスが長くない場合は、
わざわざ配列 list を作っておかなくても、
background-image の値に直接パスを指定した方が、
スコアとの対応を取りやすいし楽かもしれんね。

────────────────
// 10 点おきに画像を変える
document.body.style.backgroundImage =
( score < 10 ) ? "url( 'A.png' )" :
( score < 20 ) ? "url( 'B.png' )" :
( score < 30 ) ? "url( 'C.png' )" :
( score < 40 ) ? "url( 'D.png' )" :
( score < 50 ) ? "url( 'E.png' )" :
( score < 60 ) ? "url( 'F.png' )" :
"url( 'G.png' )" ;
────────────────

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

leg********さん

2019/4/2210:11:05

サンプルを試作してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Webページの画像を変える</title>

<style>
#counter {
font-size: 30px;
}
background-image: url("default.jpg");
background-size:cover;
}
.stage3 {
background-image: url("sample3.jpg");
background-size:cover;
}
</style>

<script>
onload = function(){
const body = document.querySelector("body");
const button = document.querySelector("button");
const counter = document.querySelector("#counter");

button.onclick = function(){
let score = Number(counter.textContent) + 1;

counter.textContent = score;

if (score==3){
body.classList.add("stage3");
}


}
}
</script>
</head>
<body>
<h3>JavaScript Webページの画像を変える</h3>

<strong>3点取ったら背景画像を変更</strong>
<div>
<span><button>クリック</button></span>
<span id="counter">0</span>
</div>

</body>
</html>

お好みの背景画像をセットしてから
おためしになってみてください。

ybb********さん

2019/4/2111:29:46

sha********さん

>・・・・・背景の画像Aを画像Bに変えたい・・・・・・・・・

ご参考に↓

<!DOCTYPE html>
<html>
<head>
<style>
.box{ margin:10px auto; width:500px; height:300px; background-image:url("https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png"); }
</style>
</head>
<body>
<div class="box">
<button onclick="setBack('https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png');">背景 1</button>
<button onclick="setBack('https://s.yimg.jp/c/logo/f/2.0/chiebukuro_r_34_2x.png');">背景 2</button>
</div>
<script>
function setBack( img ) {
document.querySelector(".box").style.backgroundImage = "url( " + img + " )";
}
</script>
</body>
</html>

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる