読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

DOM実践演習

イベントによる背景色の変更

  • DOMを利用すれば、JavaScriptからHTMLの要素を取得でき、CSSを変更できます
  • getElementsByClassName()は、IE8以下では利用できません
クリックイベントで関数を呼び出す
  1. マウスボタンをクリック
  2. イベントが発生
  3. イベントハンドラがイベント(onclick)を受け取る
  4. changeBg()関数が実行される
  5. 背景色が変わる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色を書き換える</title>
<style>
body {
  background-color: #CAE4FF;
}
</style>
</head>
<body>
<p><button onclick="changeBg()">背景色を書き換える</button></p>
<script>
function changeBg() {
  document.body.style.backgroundColor = '#F6CBC8';
}
</script>
</body>
</html>
DOMによる書き換え
  • DOMツリーでは、トップレベル要素は「document」オブジェクトです
  • documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています
  • JavaScriptの部分を外部リンクに書き換えることで、HTML内にイベント等が記述されていなことがわかります
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色を書き換える</title>
<style>
body {
  background-color: #CAE4FF;
}
button {
  cursor: pointer;
}
</style>
</head>
<body>
<p><button id="changeBg">背景色を書き換える</button></p>
<script>
window.onload = function() {
  var btn = document.getElementById( 'changeBg' );
  btn.onclick = function() {
    document.body.style.backgroundColor = '#F6CBC8';
  }
};
</script>
</body>
</html>

イベントによる画像の変更

《関数を呼び出し実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button onclick="change()">画像を変更</button>
<script>
function change(){
   var e = document.getElementById('image');
   e.setAttribute('src', 'ph02.jpg');
}
</script>
</body>
</html>


《画像を読み込み終わってから実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button id="btn">写真を変更</button>
<script>
window.onload = function() {
  var btn = document.getElementById( 'btn' );
  btn.onclick = function() {
  var e = document.getElementById( 'image' );
  e.setAttribute("src", "ph02.jpg");
  }
};
</script>
</body>
</html>


《画像の読み込みを待たずに実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
</head>
<body>
<img id="image" src="ph01.jpg">
<button id="btn">写真を変更</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById( 'btn' );
  btn.onclick = function() {
  var e = document.getElementById( 'image' );
  e.setAttribute("src", "ph02.jpg");
  }
}, false);
</script>
</body>
</html>

クリックイベントによる画像表示

  • window.onloadで読み込まれたクリックイベントが発生した時点で関数を呼び出すように書いています
<button id="btn">読込</button>
<div id="imageArea">ここに画像が読み込まれます。</div>
<script>
function showImage() {
  var htmlstr = "";
  for(var i=1; i<=3; i++) {
    htmlstr += '<img src="img/ice' + i + '.jpg" alt="アイスクリームの画像">';
  }
  document.getElementById( 'imageArea' ).innerHTML = htmlstr;
  this.disabled = true;
}
window.onload = function() {
  document.getElementById( 'btn' ).onclick = showImage;
};
</script>

  • 初期値が空文字を代入し、何も表示しない状態にしています
  • イベントが実行されると、文字列が代入されて画像表示のオブジェクトが戻り値として表示されます
var htmlstr = "";
  • ボタンの無効化処理(1度クリック処理を行ったら、その後なにもできないようにします)
  • 「addEventListener('DOMContentLoaded', function() { }, false);」の「false」の部分にあたります
this.disabled = true;

テキストの表示を追加する

  • 画像へのマウスオーバー時に説明テキストノードを追加し、マウスが離れたら削除します
  • ノードを追加するには、createTextNode()メソッドでテキストを作成してから、appendChild()メソッドで追加します
  • 削除するには、removeChild()メソッドを指定します
  • 追加したノードが最後のノードなので、lastChildを指定して削除します


《関数を呼び出し実行》

<p><img id="bigimage" src="ph01.jpg" onmouseover="down()" onmouseout="up()"></p>
<p id="description"></p>
<script>
function down() {
   var e = document.getElementById( 'description' );
   var t = document.createTextNode( '写真のご説明をいたします。' );
   e.appendChild(t);
}
function up() {
   var e = document.getElementById('description');
   e.removeChild(e.lastChild);
}
</script>


画像置換

<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像置換</title>
<style>
.smallimage{
  width: 130px;
  height: 100px; 
}
</style>
</head>
<body>
<p><img id="bigimage" src="ph1.jpg"></p>
<p>
<img class="smallimage" src="ph1.jpg" onclick="change( 'ph1.jpg' )">
<img class="smallimage" src="ph2.jpg" onclick="change( 'ph2.jpg' )">
<img class="smallimage" src="ph3.jpg" onclick="change( 'ph2.jpg' )">
</p>
<script>
function change(picname){
   var e =  document.getElementById( 'bigimage' );
   e.setAttribute( 'src', picname);
}
</script>
</body>
</html>



広告を非表示にする