高さのdivを達成するように調整することができます（divのサイズ変更を実現）

高さのdivを達成するように調整することができます（divのサイズ変更を実現）

、サイズを変更（同様のテキストエリア）を実現DIV

　　コードは以下の通りであります：

<！DOCTYPE HTML > 
< HTML > 
  < ヘッド> 
    < タイトル>のdiv实现テキストエリア效果</ タイトル> 
    < スタイル> 
      #textarea { 
        高さ：200pxの。
        幅：300ピクセル; 
        パディング：4PX 。
        国境：1pxの固体＃888 ; 
        サイズを変更：縦; 
        オーバーフロー：自動; 
      }
 
      #textarea：空：前{ 
        含量：ATTR（プレースホルダ）。
        色：#bbb 。
      } 
    </ スタイル> 
  </ ヘッド> 
  < 身体> 
    < div要素のid = "テキストエリア" のcontentEditable = "true"をプレースホルダ= "内容输入请..." > </ DIV > 
  </ ボディ> 
</ HTML >

 

第二に、DIVのresizeイベントを監視

<！DOCTYPE HTML > 
< HTML > 
  < ヘッド> 
    < タイトル> DIV监听リサイズ事件</ タイトル> 
    < スタイル> 
      .container { 
        位置：相対。
        幅：500pxなど。
        高さ：300ピクセル; 
        背景色：黒。
        パディング：4PX 。
        サイズを変更：縦; 
        オーバーフロー：自動; 
      } 
      .sizeウォッチ{ 
        幅：100％ 。
        高さ：100％; 
        位置：絶対; 
        可視性：隠されました; 
        マージン：0 ; 
        パディング：0 ; 
        ボーダー：0 ; 
      } 
 
    </ スタイル>     
    
  </ ヘッド> 
  < 身体> 
    < divのクラス= "コンテナ"ID = "mapDiv"  > 
        こんにちは
    </ DIV > 
        < スクリプト> 
        関数riseze（EL、CB）{
             // iframeタグを作成し、リスナーに挿入されるスタイルセットエレメント
            のvar IFRAME = のdocument.createElement（' IFRAME ' ）; 
            IFRAME .setAttribute（' クラス' 、' サイズ時計' ）; 
            el.appendChild（インラインフレーム）; 

            // 要素の現在の幅と高さを記録
            VAR oldWidth = el.offsetWidthと、
             varはoldHeight =をel.offsetHeight; 

            // サイズ変動IFRAMEのコールバック関数
            関数sizeChange（）{
                 // 要素の幅と高さを記録変更
                するvar 幅= el.offsetWidth;
                 VARの高さ= el.offsetHeight;
                 // 矛盾トリガーコールバックCB、そして、現在の幅と高さの要素を更新する
                IF （幅==！oldWidth || 高==！oldHeightザ）{ 
                    CB（{幅：幅、高さ：高さ}、{幅：oldWidthザ、高さ：oldHeightザ}）; 
                    oldWidthザ= 幅; 
                    oldHeightザ= 高;
                } 
            } 

            // 絞るためのタイマーを設定
            するvar タイマ=  0 ;
             //はIFRAMEコールバックサイズを変更するsizeChange機能を搭載
            iframe.contentWindow.onresize =  関数（）{ 
                てclearTimeout（タイマ）、
                タイマ= のsetTimeout（sizeChange、20であります）; 
            }; 
        } 
        // VAR EL =のdocument.getElementById（ "mapDiv"）; 
        VAR EL = document.querySelector（' .container ' ）; 
        riseze（EL、（ヴァル、OLDVAL）=>  {
            はconsole.log（ `サイズ変更！新しい：古い$ {JSON.stringify（ヴァル）}、$ {JSON.stringify（OLDVAL）}`）。
        }）; 
    </ スクリプト> 
  </ ボディ> 
</ HTML >

 

参考サイト：

1、HTTPS：//blog.csdn.net/liya_nan/article/details/81742370

2、HTTPS：//segmentfault.com/a/1190000016550156