JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

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);
    </スクリプト>
</本文>

印刷結果は次のとおりです。

オフセットは要素のサイズと親要素を取得するのに役立つことはわかっていますが、スタイル属性は関連属性も取得できます。では、それらの違いは何でしょうか?

offset

  • オフセットはどのスタイルシートでもスタイル値を取得できる
  • オフセットシリーズで得られる値は単位なしです。
  • offsetWidthにはパディング+ボーダー+幅が含まれます
  • OffsetWidth およびその他のプロパティは読み取り専用プロパティであり、取得することはできますが、割り当てることはできません。

style

  • style.widthは単位付きの文字列を取得します
  • style.widthはパディングとボーダーを除いた値を取得します
  • style.widthは、取得または割り当てることができる読み取り/書き込みプロパティです。

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js のオフセット、クライアント、スクロールの知識ポイントのまとめ
  • JS フロントエンドの知識ポイントのまとめ: オフセット、スクロール、クライアント、バブリング、イベント オブジェクトの適用
  • JavaScript のオフセット、クライアント、スクロールのプロパティの概要
  • JavaScriptのオフセット、クライアント、スクロールの使い方を詳しく説明します
  • JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

<<:  MySQL テーブルタイプ ストレージエンジンの選択

>>:  CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

推薦する

MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法

目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

nginxを使用してドメイン名ベースの仮想ホストを構成する

1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...

Webデザインチュートリアル(7):Webデザインの効率化

<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...

Linux での MySQL 8.0.11 のインストールに関するチュートリアル

1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

MySQLインスタンスが起動できない問題の分析と解決

目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...

JSデータ型検出のさまざまな方法の概要

目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...

docker を使用してシンプルな C/C++ プログラムをデプロイする方法

1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...