htmlのstyle=""の中にJavaScriptの変数を入れたい

html
1<div id="header_pages" style="width: 100%; height: 650px; background:url(background_pic) no-repeat; background-size:contain;"></div>
2

この
background;url(background_pic)
の部分の”background_pic”がJavaScriptの変数なのですが、これを有効にする書き方はどのようになるでしょうか？

htmlの中に書くのは<script></script>で囲めばいいと思いますが、htmlの中のstyle=""の中に書くには、特別な書き方はあるでしょうか？

Lhankor_Mhy

2016/05/30 04:52

background_picの内容が変更された時に、背景画像は変わるようにしたいのでしょうか、それともそのままですか？

samlife

2016/05/30 21:22

ページごとに背景が変わるようにしたいです。 bloggerを使っているので、ファイルが1枚なので、ページごとに設定できず、jsで表示を変えようとしています。

行動規範の内容に同意します

回答1件

Pure JavaScript

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="header_pages">
9
10		</div>
11		<script type="text/javascript">
12			window.onload = function () {
13				var header_pages = document.getElementById('header_pages');
14				header_pages.style.width = '100%';
15				header_pages.style.height = '650px';
16				header_pages.style.backgroundImage = 'url(http://dummyimage.com/600x400/000/fff)';
17				header_pages.style.backgroundRepeat = 'no-repeat';
18				header_pages.style.backgroundSize = 'contain';
19			};
20		</script>
21	</body>
22</html>

jQuery

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div id="header_pages">
9
10		</div>
11		<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
12		<script type="text/javascript">
13			$(function () {
14				$("#header_pages").css({
15					width: '100%'
16					, height: '650px'
17					, backgroundImage: 'url(http://dummyimage.com/600x400/000/fff)'
18					, backgroundRepeat: 'no-repeat'
19					, backgroundSize: 'contain'
20				});
21			});
22		</script>
23	</body>
24</html>

投稿2016/05/30 05:01

退会済みユーザー

総合スコア0

samlife

2016/05/31 05:51

ありがとうございます。このやり方で、swichとかでbackground-imageをいくつも設定したら、ページごとに違う画像を表示できますよね？

退会済みユーザー

2016/05/31 05:54

そうですね。動的に image を変更したいわけでしょうから、要件に合わせて条件分岐すればOKですね。

samlife

2016/05/31 06:11

<div id="header_pages" style="width: 100%; height: 650px; background:url("http://sample.jp/aaa.png") no-repeat; background-size:contain;"></div> のように、初期で画像を設定しておいて、switchでページごとに切り替えるのが良い気がしてきましたが、いかがでしょうか？

行動規範の内容に同意します