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 の高さを親コンテナの残りのスペースに合わせる方法
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...
1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...
<br />元のアドレス: http://andymao.com/andy/post/8...
最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...
目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...
目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...
1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...
序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...