JavaScript + Ajax 実践サンプル集 - backgroundImageプロパティ

backgroundImageプロパティ

説明コード分割コード関連書籍コメント投稿

Object.style.backgroundImage = "{url(URL)|none}"

backgroundImageプロパティには、HTML要素のバックグラウンドイメージを設定します。

このサンプルは、body.styleオブジェクトのbackgroundImageプロパティにバックグラウンドイメージのURL「url(images/bgdesert.jpg)」を設定します。

このサンプルを編集して試してみる

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body {
background-color: #B8BFD8;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<script type="text/javascript">
function setStyle(){
  document.body.style.backgroundColor = "#FFCC80";
  document.body.style.backgroundImage = "url(images/bgdesert.jpg)"; 
}
window.onload = function() {
  document.getElementById("btnSetStyle").onclick = setStyle;
}
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<input id="btnSetStyle" type="button" 
  value="body要素のbackgroundImageプロパティを設定" />

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

backgroundImageプロパティ

Object.style.backgroundImage = "{url(URL)|none}"

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

backgroundImageプロパティ

Object.style.backgroundImage = "{url(URL)|none}"

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!