jqueryでdivの位置を変更する方法

jquery では、マージン属性を指定した css() メソッドを使用して div の位置を変更できます。css() メソッドは、選択した要素の 1 つ以上のスタイル属性を設定または返すために使用されます。要素の設定にはmargin属性を使用し、構文は「div object.css(margin:変更された位置の値;)」となります。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery が div の位置を変更する方法

jquery では、div の位置スタイルは主に css() メソッドを通じて設定され、div の位置を変更します。

test.html という名前の新しい HTML ファイルは、DIV の位置を動的に変更する jQuery を説明するために使用されます。以下の jquery メソッドを使用して位置を動的に変更するための div タグを使用したモジュールを作成します。 div の class 属性を mydiv に設定します。これは主に、以下のこのクラスを通じて div オブジェクトを取得するために使用されます。

明らかな効果を示すために、CSS を使用して div の高さと幅を 150 ピクセルに設定し、境界線を 1 ピクセルの実線の灰色の境界線に設定します。 button タグを使用してボタンを作成し、onclick イベントを button ボタンにバインドし、ボタンがクリックされたときに edit() 関数を実行します。

js タグ内に edit() 関数を作成し、その関数内でクラス名から div オブジェクトを取得し、css() メソッドを使用して左マージン - left と上マージン - を設定します。 top をクリックして div. の位置を変更します。

test.html ファイルをブラウザで開き、ボタンをクリックして効果を確認します。

概要:

1. test.html ファイルを作成します。

2. ファイル内で、div タグを使用してモジュールを作成し、button タグを使用して js 関数の実行をトリガーするボタンを作成します。

3. js タグ内に関数を作成します。関数内で div オブジェクトを取得し、css() メソッドを使用して左マージン-left と上マージン-top を設定し、div の位置を変更します。 。

注意事項

css() メソッドは、すべての CSS スタイルの設定をサポートしています。複数のスタイルはカンマで区切られます。

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryでdivの位置を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。