Clever Geek Handbook

ブロック要素のサイズ変更イベント-サイズ変更

ブロック要素の動作を監視し、サイズが変更されたときに追加のコードを実行する必要がある場合があります。 ブロック要素のサイズが事前にわからない場合、AJAXを介したアダプティブレイアウトまたはコンテンツの読み込みに関連します。 たとえば、アダプティブレイアウトを使用している場合、ウィンドウの幅を減らすと、メインの水平メニューの一部の項目が追加の垂直メニューに移動し、マウスをホバーすると開くメニューが必要になります。 私の場合、ブロック要素の境界線、パディング、スクロールバー 、 コンテンツが考慮されますが、タスクに基づいてコードを変更できます。



PS IE 9を除くすべてのブラウザー。 



<html> <head> <meta charset="UTF-8"> </head> <body onload="javascript:res(0,0,0,0)"> <script type="text/javascript"> function res(width, height, timeout, validation) { var item = document.getElementById('test_two'); if((width == item.offsetWidth) && (height == item.offsetHeight)) { if(validation) { //      ,      . // document.getElementById('test').innerHTML = Date(); } else { timeout = 500; } window.setTimeout(res, timeout, width, height, timeout, 0); } else { width = item.offsetWidth; height = item.offsetHeight; timeout = 200; window.setTimeout(res, timeout, width, height, timeout, 1); } } </script> <div id="test"></div> <div id="test_two"><p>Test JavaScript.</p></div> </body> </html>


More articles:


All Articles