1. css() の基本的な使用法:1.1 CSSプロパティを取得する1.1.1 単一の属性値を取得する(文字列を渡す) div { 幅: 100ピクセル; 高さ: 100px; 背景: 赤; } <div>div1</div> <script src="./jQuery/jquery-3.6.0.js"></script> <スクリプト> console.log( $('div').css('width') ); console.log( $('div').css('background') ); </スクリプト> 効果: 背景は複合属性であるため、その値を取得すると、そのすべての属性がリストされます。 1.1.2 複数の属性値を取得する(配列を使用) console.log( $('div').css(['width', 'background']) ); 効果:取得した複数の属性値はオブジェクトの形式で返されます 1.2 CSSプロパティの設定1.2.1 単一のプロパティ値の設定(文字列を使用) $('div').css('color', 'white'); 効果: フォントが白くなる 1.2.2 複数のプロパティ値の設定(オブジェクトを使用) $('div').css({ 色: '白'、 幅: '200px' //ここでは '200'、'200px'、または 200 と記述できます。デフォルトの単位はピクセルです}); 効果: フォントの色は白になり、divの幅は200pxになります 1.2.3 デモ: div をクリックするたびに幅が 100 ピクセルずつ増加します $('div').クリック( $(これ).css({ width: '+=100'}) // 現在の幅属性を自動的に取得し、100px を追加します ) 効果: 2. width() シリーズの基本的な使用法 (height() シリーズも同様)2.1 幅()2.1.1 幅の値を取得する dom.css('width') と比較すると、css('width') の結果はピクセル値と単位を含む文字列になります。 console.log( $('div').css('width') ); // '100px' console.log( $('div').width() ); //100 数値型 2.1.2 幅の値を設定する // console.log( $('div').css('width','200px') ); console.log( $('div').width('200px') ); 2.2 innerWidth() と outerWidth()2.2.1 価値の比較 div { 幅: 100ピクセル; 高さ: 100px; パディング: 30px; 境界線: 20px 実線オレンジ; マージン: 10px; 背景: 赤; } console.log( $('div').width() ); //100 = コンテンツ console.log( $('div').innerWidth() ); //160 = コンテンツ + パディング console.log( $('div').outerWidth() ); //200 = コンテンツ + パディング + 境界線 console.log( $('div').outerWidth(true) ); //220 = コンテンツ + パディング + 境界線 + 余白 2.2.2 設定値: コンテンツの幅のみ変更 $('div').innerWidth('100'); //コンテンツ+パディングの合計値を100pxに変更します。パディングは変更されず、コンテンツの幅は40pxになります。 $('div').innerWidth('50'); //パディングは変更されず、コンテンツは0になります $('div').outerWidth('150');//content+padding+border=content+30*2+20*2=150、content=50 $('div').outerWidth('50');//content+30*2+20*2=50、content=0、padding、margin、border は変更されません ボックスモデル図は次のようになります。設定された幅が前の設定よりも小さい場合、パディング、ボーダー、マージンは変更されず、コンテンツのみが0に達するまで縮小されます。 幅は元より大きく設定し、コンテンツのみを広げます $('div').innerWidth('300'); 3. offset() と position()3.1 価値の比較offset()はドキュメントに対する要素の位置を取得します。position()は最も近い位置にある親に対する位置を取得します。 3.1.1 親が位置を設定しない .ラッパー{ 幅: 300ピクセル; 高さ: 300px; マージン: 100px; 背景: #ccc; } 。コンテンツ { 位置: 絶対; 左: 150px; 上: 150px; 幅: 100ピクセル; 高さ: 100px; 背景: 赤; } <div class="wrapper"> <div class="content"></div> </div> <script src="./jQuery/jquery-3.6.0.js"></script> <スクリプト> console.log($('.content').offset()); console.log($('.content').position()); </スクリプト> 効果: ラッパーには位置決めがないため、コンテンツに最も近い位置は本体であり、位置の値は本体に対して相対的になります。 3.1.2 親の設定位置 ラッパーが位置を設定する場合: .ラッパー{ 位置: 相対的; 上: 100px; 左: 100px; 幅: 300ピクセル; 高さ: 300px; 背景: #ccc; } 。コンテンツ { 位置: 絶対; 左: 100px; 上: 100px; 幅: 100ピクセル; 高さ: 100px; 背景: 赤; } 効果: 3.2 設定値の比較position() は手動で設定できませんが、offset() は手動で設定できます。 $('.content').offset({ 残り: 50, トップ: 50 }); 効果: 相対的なドキュメントの位置 4. scrollLeft() と scrollTop() scrollLeft(): 水平スクロールバーの値を左側から取得します。 4.1 価値.ラッパー{ 幅: 400ピクセル; overflow: auto;/*水平および垂直スクロールバーのキー*/ } 。コンテンツ { 表示: インラインブロック; 幅: 100%; 高さ: 100%; } $('.content').offset({ 残り: 50, トップ: 50 }); 効果: 親 (.wrapper) の値を取得するには、親が body の場合は、ドキュメントで直接値を取得できます: 4.2 値の設定垂直スクロール バーは上方向にスクロールします。スクロール距離は、テキスト コンテンツが上方向に移動する距離と、スクロール バーが下に引っ張られる距離です。 4.3 小さなデモ機能: 記事を読んでいるときに、スクロールバーが一定の間隔で自動的に上にスライドして次のコンテンツを表示するので、手動でスクロールする必要がなくなります。 。コンテンツ { 幅: 400ピクセル; } テキスト コンテンツは、content というクラス名を持つ div で囲まれています。 機能実装コード: var タイマー; var newTop; タイマー = setInterval(関数() { newTop = $(document).scrollTop(); (newTop + $(window).height() >= $('body').height()) の場合 { タイマーの間隔をクリアします。 } それ以外 { console.log('タイマー'); $(ドキュメント).scrollTop(newTop + 20); } }, 100) 本文の高さはコンテンツによって拡張されるため、 効果: 下に引き続けると、一番下に到達するとタイマーがクリアされます。 最後に底まで届かない小さな部分があることがわかります。 これは、ボディのマージンがデフォルトで8pxあるためです。これをキャンセルするだけです。 さらに、判断条件の理解を強化するために、この自動スクロール効果を配置する div を描画してみてください。 体 { マージン: 0; } .ラッパー{ 高さ:400px; 幅: 400ピクセル; オーバーフロー:自動; } 。コンテンツ { 表示: インラインブロック; 幅: 100%; } テキストコンテンツはラッパーで囲まれています var タイマー; var newTop; タイマー = setInterval(関数() { 新しいTop = $('.wrapper').scrollTop(); (Math.round(newTop + $('.wrapper').height()) >= Math.round($('.content').height())) の場合 { タイマーの間隔をクリアします。 console.log('クリア'); } それ以外 { console.log('タイマー'); $('.wrapper').scrollTop(newTop + 20); } }, 100) jQuery の CSS スタイル属性 css() と width() に関する記事シリーズはこれで終了です。jQuery の CSS スタイル属性の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows で MySQL マスター スレーブ レプリケーションを構成する方法
>>: 各 Nginx プロセスで開くことができるファイルの最大数を設定する方法
今日、slave_exec_modeというパラメータを偶然見ました。マニュアルの説明から、このパラメ...
js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...
目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...
目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...
目次Pagodaをインストールする管理塔Nginx サービス管理Apache サービス管理MySQL...
1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...
序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...
1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...
目次Anaconda の紹介1. ダウンロード1.1 インストールパッケージを保存するフォルダを作成...
MySQL 8 Windows版 zipインストール手順(ダウンロードアドレス) 1. ZIPファイ...
iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...
目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...
最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...