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.1) メモリ2.2) プライベート変数...
目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...
Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
免責事項:プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...
①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...
この記事では、Windows10でmysql8.0.17を置き換える具体的な手順を参考までに紹介しま...
目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...
<html> <ヘッド> <meta http-equiv="...
データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...
{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...
この記事では、参考までにmysql5.6.29のシェルスクリプトを共有します。具体的な内容は次のとお...
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
障害者の定義と使用法disabled 属性はブール属性です。 disabled 属性は、テキスト領域...