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 の高さを親コンテナの残りのスペースに合わせる方法

推薦する

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

画像を使用してハイパーリンクのパーソナライズされた下線を実現します

画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるので...

CSS3 でテキストマーキーを実装するためのサンプルコード

背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...

jsを使用してシンプルな弾幕スクリーンシステムを実装する

この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な...

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分 <Col span="2">ファイルをアップロー...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

Linux 環境変数とプロセス アドレス空間の概要

目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

CentOS 7 構成 Tomcat9+MySQL ソリューション

Tomcatの設定まずTomcatをインストールするTomcatのインストールは、Tomcatのイン...

DockerのTLS(SSL)証明書の有効期限の問題を解決する

問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...