質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

6901閲覧

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

samlife

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/05/30 04:40

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=""の中に書くには、特別な書き方はあるでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/05/30 04:52

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

2016/05/30 21:22

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

回答1

0

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でページごとに切り替えるのが良い気がしてきましたが、いかがでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問