ResizeSensorの正確な使い方は？

Question

私の目標は、すべての時間拡大textarea要素のサイズが変更javascript関数を実行し、他の質問から、私はこの発見された：http://marcj.github.io/css-element-queries/

を、私はそれをダウンロードして、サーバー上のCSS-要素 - クエリのフォルダを入れ、ヘッダにそれを含める：

<script src="css-element-queries/src/ResizeSensor.js"></script> 
<script src="css-element-queries/src/ElementQueries.js"></script> 

その後、私は以下の使用していたJavaScriptファイルで、私は

ResizeSensor(document.getElementById('the_id'), function(){ 
console.log("resized"); 
the_function(); 
}); 

を持っている。しかし、それは何を行うとエラーが発生しますしません。

キャッチされない例外TypeError：forEachElementでヌル のプロパティ '長さ' を読み込めません（ResizeSensor.js：46） ResizeSensorで（ResizeSensor.js：201）

Answer 1

私はElementQueriesが正しい解決策であるかどうかわからないんだけどあなたの問題のために。

要素が特定のサイズに達した場合、要素クエリは特定のCSSを適用するために使用されます。

など。され、次のあなたのHTML：

<div class="widget-name"> 
    <h2>Element responsiveness FTW!</h2> 
</div> 

とあなたのようなCSSルール定義：

.widget-name h2 { 
    font-size: 12px; 
} 

.widget-name[min-width~="400px"] h2 { 
    font-size: 18px; 
} 

.widget-name[min-width~="600px"] h2 { 
    padding: 55px; 
    text-align: center; 
    font-size: 24px; 
} 

.widget-name[min-width~="700px"] h2 { 
    font-size: 34px; 
    color: red; 
} 

今すぐ要素クエリを次の操作を行います。コンテナwidget-nameは700px以下のルールの大きさを持っている場合.widget-name[min-width~="700px"] h2適用される。 widget-nameのコンテナのサイズが600以下の場合は、ルール.widget-name[min-width~="600px"] h2が適用されます。

私はこの回答が少し説明してくれることを願っています。