ヤマカサのプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その13

JavaScript

Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -

マウスポインタに関連する処理

html
<html>
<head>
</head>
<body>
  <script type="text/javascript" src="../js/sample12.js"></script>
  <div id="elem">マウスポインターを乗せると色が変わります</div>
</body>
</html>
sample12.js
document.addEventListener('DOMContentLoaded', function() {
  var elem = document.getElementById('elem');
  elem.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'Red';
  }, false);

  elem.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
  }, false);
}, false);

外部のスタイルシートを適用する

html
<html>
<head>
</head>
<body>
  <script type="text/javascript" src="../js/sample13.js"></script>
  <link rel="stylesheet" href="../css/sample13.css">
  <div id="elem">マウスポインターを乗せると色が変わります</div>
</body>
</html>
sample13.css
.highlight {
  background-color: Red;
}
sample13.js
document.addEventListener('DOMContentLoaded', function() {
  var elem = document.getElementById('elem');
  elem.addEventListener('mouseover', function() {
    this.className = "highlight";
  }, false);

  elem.addEventListener('mouseout', function() {
    this.className = '';
  }, false);
}, false);

本

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで