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.1) メモリ2.2) プライベート変数...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...

Ubuntu 20.04にROS Noeticをインストールする方法

免責事項:プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...

初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...

Windows10でmysql8.0.17を置き換える詳細なチュートリアル

この記事では、Windows10でmysql8.0.17を置き換える具体的な手順を参考までに紹介しま...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

Vue における {{}}、v-text、v-html の違いと用途の詳細な説明

{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...

Centos7 インストール mysql5.6.29 シェル スクリプト

この記事では、参考までにmysql5.6.29のシェルスクリプトを共有します。具体的な内容は次のとお...

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...

フォームファイル選択ボックスのスタイルをカスタマイズする例

コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...

テキストエリアの disabled 属性と readonly 属性の具体的な使用法

障害者の定義と使用法disabled 属性はブール属性です。 disabled 属性は、テキスト領域...