1. 要素オフセットシリーズOffset はオフセットとして翻訳されます。関連する属性の offset シリーズを使用して、要素の位置 (オフセット)、サイズなどを動的に取得します。
オフセットの一般的な属性は次のとおりです。 たとえば、子ボックスと親ボックスがあり、特定のサイズを指定した場合、これらのプロパティがどのように取得されるかを見てみましょう。 <スタイル> *{ マージン: 0px; パディング: 0px; } 。父親{ 位置: 相対的; 左マージン: 50px; 上マージン: 10px; 幅: 200ピクセル; 高さ: 200px; 背景色: 茶色; } 。息子{ 幅: 100ピクセル; 高さ: 100px; 背景色: コーンフラワーブルー; } </スタイル> </head> <本文> <div class="父"> <div class="son"></div> </div> <スクリプト> var 父親 = document.querySelector('.父親'); var 息子 = document.querySelector('.息子') console.log('father.offsetLeft',father.offsetLeft); console.log('father.offsetTop',father.offsetTop); console.log('son.offsetWidth',son.offsetWidth); console.log('son.offsetHeight',son.offsetHeight); </スクリプト> </本文> 印刷結果は次のとおりです。 オフセットは要素のサイズと親要素を取得するのに役立つことはわかっていますが、スタイル属性は関連属性も取得できます。では、それらの違いは何でしょうか?
2. 要素表示領域クライアントシリーズClient はクライアントとして翻訳されます。要素の表示領域に関する関連情報を取得するために、関連する属性のクライアント シリーズを使用します。要素の境界サイズ、要素サイズなどは、クライアントシリーズの関連プロパティを通じて動的に取得できます。 たとえば、境界線のあるボックスが指定されている場合は、これらのプロパティを返して結果を確認します。 <スタイル> 。箱{ 幅: 200ピクセル; 高さ: 200px; 背景色: darkorchid; 境界線: 20px 実線 #ccc; } </スタイル> </head> <本文> <div class="box"></div> </本文> <スクリプト> var ボックス = document.querySelector('.box') console.log('box.clientWidth:'+box.clientWidth); console.log('box.clientWidth:'+box.clientWidth); console.log('box.clientWidth:'+box.clientWidth); コンソールにログ出力します。 </スクリプト> 結果は次のとおりです。 クライアントシリーズによって取得されたボックス サイズには、ボックスの境界線が含まれていないことがわかります。 3. 要素スクロールシリーズScroll はスクロールすることを意味します。スクロール シリーズの関連プロパティを使用して、要素のサイズ、スクロール距離などを動的に取得できます。 たとえば、上記の例のボックスのスクロール シリーズ プロパティを印刷して結果を確認してみましょう。 <スタイル> 。箱{ 幅: 200ピクセル; 高さ: 200px; 背景色: darkorchid; 境界線: 20px 実線 #ccc; } </スタイル> </head> <本文> <div class="box"></div> </本文> <スクリプト> var ボックス = document.querySelector('.box') console.log('box.scrollWidth:'+box.scrollWidth); console.log('box.scrollHeight:'+box.scrollHeight); console.log('box.scrollLeft:'+box.scrollLeft); コンソールにログ出力します。 </スクリプト> 結果は次のとおりです。 取得したボックスの高さと幅は指定された値であり、クライアント シリーズによって取得された値と同じであることがわかります。では、それらの違いは何でしょうか。次に、ボックスの高さを超えるコンテンツをボックスに追加します。 <div class="box"> Wang Huan はフロントエンドを勉強しています<br><br> Wang Huan はフロントエンドを勉強しています<br><br> Wang Huan はフロントエンドを勉強しています<br><br> Wang Huan はフロントエンドを勉強しています<br><br> Wang Huan はフロントエンドを勉強しています<br><br> Wang Huan はフロントエンドを勉強しています<br><br> 王歓はフロントエンドを学んでいる 印刷結果は次のとおりです。 印刷されたボックスの高さが大きくなっていることがわかります。実はこの値は、テキストを追加した後のボックスの実際の高さを指します。 また、2 回印刷された box.scrollLeft と box.scrollTop の値は両方とも 0 であることがわかります。これは何を意味するのでしょうか? ここで、overflow:auto を使用してボックスの外側のコンテンツをスクロール バーとして表示し、次に示すように、それにスクロール イベントを追加します。 var ボックス = document.querySelector('.box') box.addEventListener('スクロール',function(){ コンソールにログ出力します。 }) 効果は、 スクロールに応じて取得される値が変化することがわかります。実際、次の図に示すように、box.scrollTop はスクロールされた上部の距離を返します。 以上が、JavaScript で一般的な 3 つの Web エフェクト (オフセット、クライアント、スクロール シリーズ) を実装する方法の詳細です。JavaScript Web エフェクトの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL テーブルタイプ ストレージエンジンの選択
>>: CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法
目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...
画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるので...
背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...
この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な...
1. HTML部分 <Col span="2">ファイルをアップロー...
各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...
目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...
ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...
Tomcatの設定まずTomcatをインストールするTomcatのインストールは、Tomcatのイン...
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...
デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...
SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...
1. MySQLを削除する a. sudo apt-get autoremove --purge m...
まず、効果図の下にコードを添付します <!DOCTYPE html> <html&...