2008年9月1日月曜日

JavaScript でブラウザのウィンドウのリサイズに合わせて HTML の要素の値を更新

1. ウィンドウをリサイズしたときのイベントハンドラ

ブラウザのウィンドウのサイズを変更したときに生じるイベントは onresize 。

Javascript & Dhtml Cookbook (p239)  「すべての DHTML ブラウザ用のイベントハンドラ」によると、

onresize

ユーザがウィンドウまたはオブジェクトの大きさを変更した

具体的な使い方は、以下を参照

追記(2009.9.12) : イベントハンドラについては、以下が参考になる。

 

2. DOM による要素へのアクセス

ブラウザ内に表示された要素の値を変更したい場合は、以下の手順が必要。

  1. 要素へアクセス
  2. 要素の値を変更

JavaScript DOM リファレンス によると、以下の 3 の DOM を利用すれば実現できる。

 

3. 例

最初にページにアクセスしたときは `0’  が表示されている。ウィンドウをリサイズする度にその数値がインクリメントされるようにしたい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
  <head>
    <title>increment</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
    <!--
    #number{
        text-align: center;
        background-color: #fbb;
        margin: 10%;
    }
    -->
    </style>

    <script type="text/javascript">
    <!--
    function increment(){
        document.getElementById("number").firstChild.nodeValue++;
    }
    -->
    </script>

  </head>
  <body onresize="increment()">

    <p id="number">0</p>
    
  </body>
</html>