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. 親コンポーネントが子コンポーネントに値を渡す(props) 2. サブコンポーネントは親コ...
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...
Linux の /etc/network/interfaces ファイルは、ネットワーク インターフ...
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...
MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...
ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...
[LeetCode] 180. 連続した数字少なくとも 3 回連続して出現するすべての数字を検索す...
Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
SPA を構築する場合、多くの場合、特定のルートを保護する必要があります。たとえば、認証されたユーザ...