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

推薦する

Vueコンポーネント通信方法事例まとめ

目次1. 親コンポーネントが子コンポーネントに値を渡す(props) 2. サブコンポーネントは親コ...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

Linux /etc/network/interfaces 設定インターフェース方法

Linux の /etc/network/interfaces ファイルは、ネットワーク インターフ...

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...

echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...

SQLはLeetCodeを実装します(180.連続した数字)

[LeetCode] 180. 連続した数字少なくとも 3 回連続して出現するすべての数字を検索す...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...

1 つの記事で Vue ミドルウェア パイプラインを学ぶ

SPA を構築する場合、多くの場合、特定のルートを保護する必要があります。たとえば、認証されたユーザ...